Resumo : neste tutorial, você aprenderá como usar o appendChild()
método JavaScript para adicionar um nó ao final da lista de nós filhos de um nó pai especificado.
Introdução ao appendChild()
método JavaScript
O appendChild()
é um método da Node
interface. O appendChild()
método permite adicionar um nó ao final da lista de nós filhos de um nó pai especificado.
O seguinte ilustra a sintaxe do appendChild()
método:
parentNode.appendChild(childNode);
Linguagem de código: CSS ( css )
Neste método, childNode
é o nó a ser anexado ao nó pai fornecido. O appendChild()
retorna o filho anexado.
Se childNode
for uma referência a um nó existente no documento, o appendChild()
método moverá childNode
da sua posição atual para a nova posição.
appendChild()
Exemplos de JavaScript
Vejamos alguns exemplos de uso do appendChild()
método.
1) appendChild()
Exemplo simples
Suponha que você tenha a seguinte marcação HTML:
<ul id="menu">
</ul>
Linguagem de código: HTML, XML ( xml )
O exemplo a seguir usa o appendChild()
método para adicionar três itens de lista ao <ul>
elemento:
function createMenuItem(name) {
let li = document.createElement('li');
li.textContent = name;
return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
Linguagem de código: JavaScript ( javascript )
Como funciona:
- Primeiro, a
createMenuItem()
função cria um novo elemento de item de lista com um nome especificado usando ocreateElement()
método. - Segundo, selecione o
<ul>
elemento com idmenu
usando oquerySelector()
método. - Terceiro, chame a
createMenuItem()
função para criar um novo item de menu e use oappendChild()
método para anexar o item de menu ao<ul>
elemento
Saída:
<ul id="menu">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
</ul>
Linguagem de código: HTML, XML ( xml )
Junte tudo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript appendChild() Demo</title>
</head>
<body>
<ul id="menu">
</ul>
<script>
function createMenuItem(name) {
let li = document.createElement('li');
li.textContent = name;
return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
2) Exemplo de movimentação de um nó dentro do documento
Supondo que você tenha duas listas de itens:
<ul id="first-list">
<li>Everest</li>
<li>Fuji</li>
<li>Kilimanjaro</li>
</ul>
<ul id="second-list">
<li>Karakoram Range</li>
<li>Denali</li>
<li>Mont Blanc</li>
</ul>
Linguagem de código: HTML, XML ( xml )
O exemplo a seguir usa appendChild()
para mover o primeiro elemento filho da primeira lista para a segunda lista:
// get the first list
const firstList = document.querySelector('#first-list');
// take the first child element
const everest = firstList.firstElementChild;
// get the second list
const secondList = document.querySelector('#second-list');
// append the everest to the second list
secondList.appendChild(everest)
Linguagem de código: JavaScript ( javascript )
Como funciona:
- Primeiro, selecione o primeiro elemento pelo seu id (
first-list
) usando oquerySelector()
método. - Segundo, selecione o primeiro elemento filho da primeira lista.
- Terceiro, selecione o segundo elemento pelo seu id (
second-list
) usando oquerySelector()
método. - Finalmente, anexe o primeiro elemento filho da primeira lista à segunda lista usando o
appendChild()
método.
Aqui está a lista antes e depois da mudança:
Resumo
- Use
appendChild()
o método para adicionar um nó ao final da lista de nós filhos de um nó pai especificado. - O
appendChild()
pode ser usado para mover um nó filho existente para a nova posição no documento.