JavaScript antes() – Acervo Lima Tutorials

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

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

O element.before()método permite inserir um ou mais nós antes do arquivo element. O seguinte mostra a sintaxe do before()método:

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

Nesta sintaxe, o before()método insere o nó antes do Elemento na árvore DOM.

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

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

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

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

Além disso, o before()método aceita uma ou mais strings em vez de nós. Neste caso, o before()método trata as strings como Textnós:

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

O before()método retorna undefined. Se um nó não puder ser inserido, o método before() lança uma HierarchyRequestErrorexceção.

Exemplos de JavaScript antes()

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

1) Usando JavaScript before() para inserir um nó antes de um elemento

O exemplo a seguir usa o before()método para inserir um <h1>antes de um parágrafo:

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

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

    <body>

        <p>This is JavaScript DOM before() method demo.</p>

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

            // create a new h1 element
            const h1 = document.createElement('h1');
            h1.innerText = 'JavaScript DOM - before()';

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

</html>Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, obtenha o <p>elemento usando o querySelector()método:

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

Segundo, crie um novo elemento de título e defina seu innerText:

const h1 = document.createElement('h1');
h1.innerText = 'JavaScript DOM - before()';
Linguagem de código:  JavaScript  ( javascript )

Terceiro, insira o <h1>elemento antes do elemento de parágrafo:

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

2) Usando JavaScript before() para inserir vários nós antes de um elemento

O exemplo a seguir usa o before()método para inserir vários nós antes de 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 - before()</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.firstChild.before(...items);

        </script>
    </body>

</html>Linguagem de código:  JavaScript  ( javascript )

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 )

Finalmente, insira os elementos do item da lista antes do primeiro filho do elemento ul:

list.firstChild.before(...items);Linguagem de código:  JavaScript  ( javascript )

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

O <ul>elemento terá a seguinte aparência:

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

Os três primeiros itens (React, Meteor e Polymer) foram inseridos antes do item Angular, que era o primeiro filho do <ul>elemento.

3) Usando JavaScript before() para inserir strings

Quando você usa strings no before()método, o before()método as tratará 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 - before()</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.before('🧡 ');

        </script>
    </body>

</html>Linguagem de código:  JavaScript  ( javascript )