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

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

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