Inserção de JavaScript antes – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar JavaScript insertBefore()para inserir um nó antes de outro nó como um nó filho de um nó pai especificado.

Introdução ao `insertBefore()`método JavaScript

Para inserir um nó antes de outro nó como nó filho de um nó pai, você usa o parentNode.insertBefore()método:

parentNode.insertBefore(newNode, existingNode);
Linguagem de código:  CSS  ( css )

Neste método:

O newNodeé o novo nó a ser inserido.
O existingNodeé o nó antes do qual o novo nó é inserido. Se existingNodefor null, ele insertBefore()insere newNodeno final dos parentNodenós filhos do.

O insertBefore()retorna o nó filho inserido.

`insertBefore()`Função auxiliar JavaScript

A insertBefore()função a seguir insere um novo nó antes de um nó especificado:

function insertBefore(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode);
}
Linguagem de código:  JavaScript  ( javascript )

`insertBefore()`Exemplo de JavaScript

Suponha que você tenha a seguinte lista de itens:

<ul id="menu">
    <li>Services</li>   
    <li>About</li>
    <li>Contact</li>
</ul>
Linguagem de código:  HTML, XML  ( xml )

O exemplo a seguir usa o insertBefore()método para inserir um novo nó como o primeiro item da lista:

let menu = document.getElementById('menu');
// create a new li node
let li = document.createElement('li');
li.textContent = 'Home';

// insert a new node before the first list item
menu.insertBefore(li, menu.firstElementChild);Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, obtenha o menuelemento usando o getElementById()método.
Segundo, crie um novo item de lista usando o createElement()método.
Terceiro, insira o elemento do item da lista antes do primeiro elemento filho do menuelemento usando o insertBefore()método.

Junte tudo.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JavaScript insertBefore()</title>
</head>

<body>
    <ul id="menu">
        <li>Services</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');
        // create a new li node
        let li = document.createElement('li');
        li.textContent = 'Home';

        // insert a new node before the first list item
        menu.insertBefore(li, menu.firstElementChild);
    </script>
</body>

</html>
Linguagem de código:  HTML, XML  ( xml )