Resumo : neste tutorial, você aprenderá como inserir um novo nó após um nó existente como um nó filho de um nó pai.
Este tutorial foi escrito quando a API DOM não suportava o after()método. Agora você pode usar o after()método para inserir um nó após um elemento.
JavaScript DOM fornece o insertBefore()método que permite inserir um novo nó após um nó existente como um nó filho.
Para inserir um novo nó após um nó existente como nó filho, você pode usar a seguinte abordagem:
- Primeiro, selecione o próximo nó irmão do nó existente.
- Em seguida, selecione o nó pai do nó existente e chame o
insertBefore()método no nó pai para inserir um novo nó antes do nó irmão imediato.
A insertAfter()função a seguir ilustra a lógica:
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}Linguagem de código: JavaScript ( javascript )Suponha que você tenha a seguinte lista de itens:
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>Linguagem de código: HTML, XML ( xml )O seguinte insere um novo nó após o último item da lista:
let menu = document.getElementById('menu');
// create a new li node
let li = document.createElement('li');
li.textContent = 'Services';
// insert a new node after the last list item
insertAfter(li, menu.lastElementChild);Linguagem de código: JavaScript ( javascript )Como funciona:
- Primeiro, selecione o
ulelemento pelo seu id (menu) usando ogetElementById()método. - Segundo, crie um novo item de lista usando o
createElement()método. - Terceiro, use o
insertAftermétodo () para inserir um elemento de item de lista após o último elemento de item de lista.
Junte tudo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript insertAfter() Demo</title>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<script>
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}
let menu = document.getElementById('menu');
// create a new li node
let li = document.createElement('li');
li.textContent = 'Services';
insertAfter(li, menu.lastElementChild);
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )O menu fica assim após a inserção:
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>Linguagem de código: HTML, XML ( xml )Resumo
- JavaScript DOM ainda não oferece suporte ao
insertAfter()método. - Use o
insertBefore()método e anextSiblingpropriedade para inserir um novo nó antes de um nó existente como filho de um nó pai.
Anterior
Próximo
