Este tutorial mostra como criar um elemento DOM e anexá-lo à árvore DOM.
Para criar um elemento DOM, você usa o createElement()
método.
const element = document.createElement(htmlTag);
Linguagem de código: JavaScript ( javascript )
O exemplo a seguir cria um novo <div>
elemento:
const e = document.createElement('div');
Linguagem de código: JavaScript ( javascript )
E preencha o <div>
elemento com qualquer conteúdo HTML:
e.innerHTML = 'JavaScript DOM';
Linguagem de código: JavaScript ( javascript )
E anexe o <div>
elemento à árvore DOM usando o appendChild()
método:
document.body.appendChild(e);
Linguagem de código: CSS ( css )
Além de usar a innerHTML
propriedade, você pode usar os métodos DOM para criar nós de texto e anexar os nós de texto ao novo elemento:
var textnode = document.createTextNode('JavaScript DOM');
e.appendChild(textnode);
Linguagem de código: JavaScript ( javascript )
Depois disso, você pode usar o appendChild()
método para anexar o novo elemento à árvore DOM.