JavaScript depois() – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar o after()método JavaScript para inserir um nó após um elemento.

Introdução ao método JavaScript after()

O after()é um método do Elementtipo. O element.after()método permite inserir um ou mais nós após o arquivo element.

Aqui está a sintaxe do after()método:

Element.after(node)Linguagem de código:  JavaScript  ( javascript )

Nesta sintaxe, o after()método insere o nó após o Elemento na árvore DOM.

Por exemplo, suponha que você tenha um <h1>elemento e queira inserir um <p>elemento depois dele, você pode usar o after()método assim:

h1.after(p)Linguagem de código:  JavaScript  ( javascript )

Para inserir vários nós após um elemento, você passa os nós para o after()método da seguinte maneira:

Element.after(node1, node2, ... nodeN)Linguagem de código:  JavaScript  ( javascript )

O after()método também aceita uma ou mais strings. Neste caso, o after()método trata as strings como Textnós:

Element.after(str1, str2, ... strN)Linguagem de código:  JavaScript  ( javascript )

O after()método retorna undefined. Se um nó não puder ser inserido, uma exceção será lançada HierarchyRequestError.

Exemplos de JavaScript after()

Vejamos alguns exemplos de uso do after()método JavaScript.

1) Usando JavaScript after() para inserir um nó após um elemento

O exemplo a seguir usa o after()método para inserir um parágrafo após um <h1>elemento:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript DOM - after()</title>
    </head>

    <body>
        <h1>JavaScript DOM - after()</h1>

        <script>
            const h1 = document.querySelector('h1');

            // create a new paragraph element
            const p = document.createElement('p');
            p.innerText = 'This is JavaScript DOM after() method demo';

            // insert the paragraph after the heading
            h1.after(p);
        </script>
    </body>

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

Como funciona.

Primeiro, obtenha o elemento de título usando o querySelector()método:

 const h1 = document.querySelector('h1');Linguagem de código:  JavaScript  ( javascript )

Segundo, crie um novo elemento de parágrafo e defina seu innerText:

const p = document.createElement('p');
p.innerText = 'This is JavaScript DOM after() method demo';Linguagem de código:  JavaScript  ( javascript )

Terceiro, insira o <p>elemento após o <h1>elemento:

h1.after(p);Linguagem de código:  JavaScript  ( javascript )

2) Usando JavaScript after() para inserir vários nós após um elemento

O exemplo a seguir usa o after()método para inserir vários nós após um elemento:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript DOM - after()</title>
    </head>
    <body>
        <ul>
            <li>Angular</li>
            <li>Vue</li>
        </ul>
        <script>
            const list = document.querySelector('ul');

            const libs = ['React', 'Meteor', 'Polymer'];
            const items = libs.map((lib) => {
                const item = document.createElement('li');
                item.innerText = lib;
                return item;
            });

            list.lastChild.after(...items);

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

Como funciona:

Primeiro, selecione o elemento ul usando o querySelector()método:

 const list = document.querySelector('ul');Linguagem de código:  JavaScript  ( javascript )

Segundo, defina uma matriz de strings. Na prática, você pode obtê-lo por meio de uma chamada de API.

 const libs = ['React', 'Meteor', 'Polymer'];Linguagem de código:  JavaScript  ( javascript )

Terceiro, transforme o array de strings em um array de elementos li usando o map()método:

const items = libs.map((lib) => {
  const item = document.createElement('li');
  item.innerText = lib;
  return item;
});Linguagem de código:  JavaScript  ( javascript )

Por fim, insira os elementos do item da lista após o último filho do elemento ul:

list.lastChild.after(...items);Linguagem de código:  JavaScript  ( javascript )

Observe que ...itemsusa o operador spread para espalhar o elemento da itemsmatriz.

O elemento ul terá a seguinte aparência:

<ul>
    <li>Angular</li>
    <li>Vue</li>
    <li>React</li>
    <li>Meteor</li>
    <li>Polymer</li>
</ul>Linguagem de código:  HTML, XML  ( xml )

Os últimos três itens (React, Meteor e Polymer) foram inseridos após o item Vue, que era o último filho do <ul>elemento.

3) Usando JavaScript after() para inserir strings

Quando você usa strings no after()método, ele as trata como Textnós. Por exemplo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript DOM - after()</title>
        <style>
            button {
                padding: 0.75em 1em;
                background-color: #F7DF1E;
                color: #000;
                cursor: pointer;
                border-radius: 50vw;
            }
        </style>
    </head>
    <body>
        <button>Donate Here</button>
        <script>
            const button = document.querySelector('button');
            button.firstChild.after(' 🧡');

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

Resumo

Use o element.after()método para inserir um ou mais nós após o elemento.

JavaScript antes()

Inserção de JavaScriptAdjacentHTML