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 Nodeinterface. 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 childNodefor uma referência a um nó existente no documento, o appendChild()método moverá childNodeda 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 idmenuusando 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.
