Nós DOM JavaScript

Índice

    Mostrar índice

Adicionando e removendo nós (elementos HTML)

Criando novos elementos HTML (nós)

Para adicionar um novo elemento ao HTML DOM, você deve primeiro criar o elemento (nó do elemento), e, em seguida, anexe-o a um elemento existente.

Exemplo

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
element.appendChild(para);
</script>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

Exemplo explicado

Este código cria um novo elemento <p>:

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

Para adicionar texto ao elemento <p>, você deve primeiro criar um nó de texto. Este código cria um nó de texto:

const node = document.createTextNode("This is a new paragraph.");

Em seguida, você deve anexar o nó de texto ao elemento <p>:

para.appendChild(node);

Finalmente você deve anexar o novo elemento a um elemento existente.

Este código encontra um elemento existente:

const element = document.getElementById("div1");

Este código anexa o novo elemento ao elemento existente:

element.appendChild(para);

Criando novos elementos HTML - insertBefore()

O método appendChild() no exemplo anterior anexou o novo elemento como o último filho do pai.

Se você não quiser, você pode usar o método insertBefore():

Exemplo

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para,child);
</script>

</body>
</html>

Removendo elementos HTML existentes

Para remover um elemento HTML, use o remove() método:

Exemplo

<div>
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Remove an HTML Element.</h3>

<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<button onclick="myFunction()">Remove Element</button>

<script>
function myFunction() {
document.getElementById("p1").remove();
}
</script>

</body>
</html>

Exemplo explicado

O documento HTML contém um elemento <div> com dois nós filhos (dois <p> elementos):

<div>
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>

Encontre o elemento que deseja remover:

const elmnt = document.getElementById("p1");

Em seguida, execute o método remove() nesse elemento:

elmnt.remove();

O método remove() não funciona em navegadores mais antigos, veja o exemplo abaixo sobre como usar removeChild() em vez disso.

Removendo um nó filho

Para navegadores que não suportam o método remove(), você deve encontrar o nó pai para remover um elemento:

Exemplo

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Remove Child Element</p>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>

Exemplo explicado

Este documento HTML contém um elemento <div> com dois nós filhos (dois <p> elementos):

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>

Encontre o elemento com id="div1":

const parent = document.getElementById("div1");

Encontre o elemento <p> com id="p1":

const child = document.getElementById("p1");

Remova o filho do pai:

parent.removeChild(child);

Aqui está uma solução alternativa comum: Encontre o filho que você deseja remover e use seu Propriedade parentNode para encontrar o pai:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

Substituindo Elementos HTML

Para substituir um elemento no HTML DOM, use o método replaceChild():

Exemplo

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
 
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Replace an HTML Element.</h3>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is a paragraph.</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>