Criar nós e elementos
Podemos criar nós e elementos e adicioná-los ao DOM com os seguintes métodos:
| Método | Descrição |
| document.createElement() | Cria um elemento |
| document.createAttribute() | Cria um nó do tipo atributo |
| document.createComment() | Cria um nó do tipo comentário |
| document.createTextNode() | Cria um nó do tipo texto |
| element.appendChild() | Adiciona um nó como último filho do elemento element |
| element.insertBefore() | Insere um nó filho do elemento element antes de um nó filho existente |
| element.insertAdjacentElement() | Insere um elemento como filho do elemento element numa determinada posição |
| element.insertAdjacentText() | Insere texto como filho do elemento element numa determinada posição |
| element.insertAdjacentHTML() | Insere texto de HTML como filho do elemento element numa determinada posição |
| element.setAttribute() | Atribui um atributo ao elemento element |
| element.setAttributeNode() | Adiciona um nó de atributo ao elemento element |
document.createElement()
Adiciona um nó de atributo ao elemento element
Sintaxe:
document.createElement(elem)
elem: nome do elemento a criar
NOTA 1: o elemento é criado mas não adicionado ao DOM
NOTA 2: se se pretender criar um elemento que tenha texto, por exemplo, tem de se criar o nó de texto e adicioná-lo ao elemento criado.
Exemplo:
<body>
<div id='div1'></div>
<script>
let p = document.createElement("P");
let text = document.createTextNode("Linha A");
p.appendChild(text);
let div1 = document.getElementById('div1');
div1.appendChild(p);
</script>
</body> Este exemplo cria um elemento P, um nó de texto, adiciona o nó de texto ao elemento p criado e adiciona o elemento P a uma DIV com o id ‘div1’.
document.createAttribute()
Cria um atributo com um determinado nome.
Sintaxe:
document.createAttribute(atributo)
atributo: nome do atributo
NOTA 1: Após criar o atributo deve usar o método atribute.value para definir o valor do atributo.
NOTA 2: Após criar o atributo deve usar o método element.setAttributeNode() para atribuir o atributo ao elemento.
NOTA 3: Uma alternativa ao método document.createAttribute() é o método element.setAttribute().
Exemplo:
<head>
<title>CreateAttribute</title>
<style>
.green{
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<p id='p1'>Linha 1</p>
<script>
let p = document.getElementById('p1');
//cria atributo:
let atr = document.createAttribute('class');
//define valor do atributo
atr.value = 'green';
//atribui o atributo ao elemento P:
p.setAttributeNode(atr);
</script>
</body> document.createComment()
Cria um nó de comentário com um determinado texto.
Sintaxe:
document.createComment(text)
text: texto do comentário
Exemplo:
var comment = document.createComment("Texto do comentário");
//adiciona o comentário ao corpo do documento:
document.body.appendChild(comment);document.createTextNode()
Cria um nó de text com um determinado texto.
Sintaxe:
document.createTextNode(text)
text: texto do nó de texto
Exemplo:
<body>
<script>
//cria um elemento P:
let p = document.createElement('P');
//cria um nó de texto:
let txt = document.createTextNode('Linha de texto');
//adiciona o nó de texto ao elemento P:
p.appendChild(txt);
//adiciona o elemento P ao corpo do documento:
document.body.appendChild(p);
</script>
</body> element.appendChild()
Adiciona o elemento elem como último filho do elemento element.
Sintaxe:
element.appendChild(elem)
elem: elemento a ser adicionado
Exemplo:
<body>
<script>
//cria um elemento P:
let p = document.createElement('P');
//cria um nó de texto:
let txt = document.createTextNode('Linha de texto');
//adiciona o nó de texto ao elemento P:
p.appendChild(txt);
//adiciona o elemento P ao corpo do documento:
document.body.appendChild(p);
</script>
</body> element.insertBefore()
Adiciona o elemento elem como filho do elemento element, antes do filho child.
Sintaxe:
element.appendChild(elem, child)
elem: elemento a ser adicionado
child: filho existente do elemento element
Exemplo:
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
//cria um elemento LI:
let li = document.createElement('LI');
//cria um nó de texto:
let txt = document.createTextNode('Item 3');
//adiciona o nó de texto ao elemento LI:
li.appendChild(txt);
//seleciona o elemento UL:
let ul = document.getElementsByTagName('UL')[0];
//insere o elemento LI antes do 1º filho do elemento UL:
ul.insertBefore(li, ul.childNodes[0]);
</script>
</body> element.insertAdjacentElement()
Insere o elemento elem no elemento element, na posição pos.
Sintaxe:
element.insertAdjacentElement(pos, elem)
pos: posição onde o elemento é inserido
valores possíveis: “afterbegin”, “afterend”, “beforebegin”, “beforeend”
elem: elemento a ser inserido
Exemplo:
<body>
<h1>Cabeçalho</h1>
<span>Este é um </span>
<script>
//seleciona o elemento H1:
let h1 = document.getElementsByTagName('H1')[0];
//seleciona o elemento SPAN:
let span = document.getElementsByTagName('SPAN')[0];
//insere o elemento SPAN no inicio do elemento H1:
h1.insertAdjacentElement('afterbegin', span);
</script>
</body> element.insertAdjacentText()
Insere o texto text na posição pos, relativamente ao elemento element.
Sintaxe:
element.insertAdjacentText(pos, text)
pos: posição relativa ao elemento elem onde o elemento é inserido
valores possíveis: “afterbegin”, “afterend”, “beforebegin”, “beforeend”
text: texto a ser inserido
Exemplo:
<body>
<h1>Cabeçalho</h1>
<script>
//seleciona o elemento H1:
let h1 = document.getElementsByTagName('H1')[0];
//insere o texto antes do elemento H1:
h1.insertAdjacentText('beforebegin', 'Linha de texto');
</script>
</body>element.insertAdjacentHTML()
Insere o texto de HTML html na posição pos, relativamente ao elemento element.
Sintaxe:
element.insertAdjacentHTML(pos, html)
pos: posição relativa ao elemento elem onde o elemento é inserido
valores possíveis: “afterbegin”, “afterend”, “beforebegin”, “beforeend”
html: texto de HTML a ser inserido
Exemplo:
<body>
<h1>Cabeçalho</h1>
<script>
//seleciona o elemento H1:
let h1 = document.getElementsByTagName('H1')[0];
//insere o texto de HTML antes do elemento H1:
h1.insertAdjacentHTML('beforebegin', '<p>Linha de texto 1</p>');
</script>
</body>element.setAttribute()
Atribui um atributo e respectivo valor ao elemento element.
Sintaxe:
element.setAttribute(atributo, valor)
atributo: nome do atributo
valor: valor do atributo atributo
Exemplo:
<head>
<title>CreateAttribute</title>
<style>
.green{
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Cabeçalho</h1>
<script>
//seleciona o elemento H1:
let h1 = document.getElementsByTagName('H1')[0];
//atribui o atributo ‘class’ com o valor ‘green’ao
elemento H1:
h1.setAttribute('class', 'green');
</script>
</body>element.setAttributeNode()
Adiciona um nó de atributo ao elemento element.
Sintaxe:
element.setAttribute(no)
no: nó de atributo
Exemplo:
<head>
<title>CreateAttribute</title>
<style>
.green{
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Cabeçalho</h1>
<script>
//seleciona o elemento H1:
let h1 = document.getElementsByTagName('H1')[0];
//cria nó de atributo com o nome ‘class’:
let node = document.createAttribute('class');
//atribui o valor ‘green’ ao nó:
node.value = 'green'
//adiciona o nó de atributo ao elemento H1:
h1.setAttributeNode(node);
</script>
</body>