Criar elemento HTML com JavaScript (appendChild e innerHTML)

Neste artigo você vai aprender a como criar elemento HTML com JavaScript e  também as diferenças dos métodos appendChile  innerHTML

Pra criar um elemento HTML com JavaScript você usa o método document.createElement(‘tag’), define o conteúdo dele com textContent (quando é só texto) ou innerHTML (quando você precisa que a string seja interpretada como HTML) e insere na página com appendChild() ou append()

Exemplo mínimo: const p = document.createElement(‘p’) p.textContent = ‘Testando’ document.body.appendChild(p)

Regra rápida: appendChild constrói e anexa só aquele nó, então tende a ser mais performático em inserções pontuais innerHTML reparseia e recria todos os nós de dentro do elemento, é ótimo quando você quer substituir o conteúdo por um bloco de HTML, mas cuidado ao usar com dado vindo do usuário por causa de XSS

Fala programador(a), tudo bem? Bora aprender mais sobre criação de elementos e DOM em JavaScript!

Primeiramente vamos abordar a criação de elemento via DOM para ser representado no HTML

Para criar um elemento devemos utilizar o método createElement, com a tag como parâmetro

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

E também inserir um texto nele com a propriedade textContent

Veja um exemplo prático:

const paragrafo = document.createElement("p");

const texto = document.createTextNode("Testando");

paragrafo.appendChild(texto);

console.log(paragrafo);

Desta forma você terá um elemento p criado pelo JavaScript

É interessante também entender que o objeto document sempre será utilizado na manipulação de DOM, pois ele contem todos os métodos para estas implementações

E para inserir no HTML?

Aqui vai a grande questão, utilizar appendChild ou innerHTML?

Utilizando o appendChild você terá uma operação mais performática, pois ele não reconstrói o DOM completamente

Já o innerHTML causa a reconstrução completa do elemento, pois este método exerce uma substituição de todos os elementos

Logo, se você busca performance utilize o append, porém se a intenção for realmente substituir tudo você deve optar pelo innerHTML

Veja um exemplo com appendChild:

const body = document.body;

body.appendChild(paragrafo);

Aqui reaproveitamos o código da outra etapa da criação, apenas selecionamos o body e inserimos o elemento com appendChild

Agora veja um exemplo com innerHTML:

const body = document.body;

body.innerHTML += paragrafo.innerHTML;

Aqui a situação muda um pouco, temos que acessar a propriedade innerHTML tanto do body quanto do elemento que criamos

E aí sim adicionar o mesmo ao elemento

Conclusão

Neste artigo vimos como criar elemento HTML com JavaScript

Para isso utilizamos o método createElement de document

E também uma comparação do método appendChild com innerHTML, que como digo anteriormente o método append tem mais performance para inserir elementos e deve ser optado, se este é o requisito do sistema

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Adicionar um subtítulo ‘appendChild ou innerHTML: qual é mais rápido?’ explicando de forma qualitativa que não existe vencedor absoluto, depende do uso: em modificação única, createElement + appendChild tende a ser mais performático, porque o innerHTML reparseia e recria todos os nós internos do elemento a cada vez que você seta ele. Fazer innerHTML += dentro de um loop é péssimo, mas montar uma string temporária e atribuir o innerHTML uma vez só tem desempenho parecido ou até melhor. E pra inserir MUITOS elementos de uma vez, o recomendado é usar DocumentFragment, que junta tudo e faz um append só

Explicar que o innerHTML é um ponto de injeção (injection sink) e vira vetor de XSS quando o valor vem de entrada não confiável do usuário, porque ele parseia a string como HTML. Vale o aviso: mesmo o HTML5 impedindo que uma tag <script> inserida via innerHTML seja executada, ainda dá pra abusar de coisas como o atributo onerror de uma <img>. Quando você só quer inserir TEXTO, o certo é usar textContent, que insere o valor como texto puro, não é parseado como HTML e por isso previne o XSS

Incluir uma nota rápida sobre a diferença entre append() e appendChild(): o appendChild() aceita só um objeto Node por vez e retorna o nó anexado, enquanto o append() aceita nós E strings de texto, permite passar vários itens numa mesma chamada e não devolve valor de retorno. Um mini exemplo de append(‘texto’) ajuda

Adicionar uma seção de Perguntas Frequentes com as dúvidas que aparecem na SERP (diferença appendChild x innerHTML, segurança do innerHTML, append x appendChild, innerHTML x textContent/innerText). Conteúdo detalhado no campo geo.faq

Num vídeo da playlist de JavaScript aqui do canal eu montei uma div e testei os dois lado a lado pra ver a diferença acontecer na prática

Quando joguei uma tag de título via innerHTML, o navegador renderizou ela como HTML de fato, virou um cabeçalho na página

Já com a versão que insere só texto, a mesma tag apareceu como texto cru na tela, sem ser interpretada

A lição que fica é essa: se você quer que a string vire HTML, innerHTML se é só texto, textContent resolve, é mais seguro e mais performático