3.1 Criação de Elementos
Trabalhar com DOM (Document Object Model) não envolve apenas navegar pelos elementos existentes, mas também criar novos, inseri-los no documento e removê-los. Agora vamos dar uma olhada em vários métodos e abordagens para criar e remover elementos no DOM.
Método document.createElement()
O método principal para criar um novo elemento no DOM é document.createElement(). Este método aceita o nome da tag do elemento que você quer criar e retorna um novo elemento vazio.
Exemplo:
const newDiv = document.createElement('div');
Adicionando conteúdo ao elemento
Depois de criar um novo elemento, você pode preenchê-lo com conteúdo. Isso pode ser texto, outros elementos ou uma combinação de ambos.
Exemplo:
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
Também é possível usar a propriedade innerHTML para adicionar conteúdo HTML.
Exemplo:
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>This is a new div element with bold text</strong>';
3.2 Inserindo Elementos no DOM
O elemento criado precisa ser adicionado ao documento. Existem vários métodos para inserir elementos no DOM:
1. Método appendChild()
O método appendChild() adiciona um elemento ao final da lista de elementos filho do elemento pai especificado.
Exemplo:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. Método insertBefore()
O método insertBefore() adiciona um elemento antes de um elemento filho especificado do elemento pai.
Exemplo:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
<p>This is a paragraph</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. Método append()
O método append() adiciona um ou mais nós ou strings ao final da lista de elementos filho do elemento pai especificado.
Exemplo:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.append(newDiv);
4. Método prepend()
O método prepend() adiciona um ou mais nós ou strings ao início da lista de elementos filho do elemento pai especificado.
Exemplo:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 Clonagem de Elementos
O método cloneNode() permite clonar um elemento. A clonagem pode ser profunda (copiando todos os elementos filhos) ou rasa (apenas o próprio elemento).
Exemplo de clonagem profunda:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
Exemplo de clonagem rasa:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
O próprio elemento <div> foi clonado, e isso pode ser visto através dos estilos, no entanto, seus elementos filhos (o nó de texto "This is a div element" e <ul>) não foram clonados.
3.4 Remoção de Elementos
1. Método removeChild()
O método removeChild() remove um elemento filho do elemento pai.
Exemplo:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. Método remove()
O método remove() remove um elemento diretamente do DOM.
Exemplo:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a div element</div>
<p>This is a paragraph</p>
</body>
</html>
const element = document.querySelector('div');
element.remove();
3. Limpando o Conteúdo do Elemento
O método innerHTML pode ser usado para remover todo o conteúdo de um elemento atribuindo-lhe uma string vazia.
Exemplo:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const element = document.querySelector('div');
element.innerHTML = '';
4. Removendo Todos os Elementos Filhos
Para remover todos os elementos filhos, você pode usar um loop ou o método innerHTML.
Exemplo com loop:
<html>
<head>
<title>Document</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
Exemplo com innerHTML:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const parent = document.querySelector('div');
parent.innerHTML = '';
GO TO FULL VERSION