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 innerHTMLpropriedade, 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.
Próximo
