Anexar JavaScript

Resumo : neste tutorial, você aprenderá sobre o prepend()método JavaScript que insere Nodeobjetos ou DOMStringobjetos antes do primeiro filho de um nó pai.

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

O prepend()método insere um conjunto de Nodeobjetos ou DOMStringobjetos antes do primeiro filho de um nó pai:

parentNode.prepend(...nodes);
parentNode.prepend(...DOMStrings);Linguagem de código:  JavaScript  ( javascript )

O prepend()método insere DOMStringobjetos como Textnós. Observe que a DOMStringé uma string UTF-16 que mapeia diretamente para uma string.

O prepend()método retorna undefined.

Exemplos de métodos JavaScript prepend()

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

1) Usando o método prepend() para preceder um exemplo de elemento

Digamos que você tenha o seguinte <ul>elemento:

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

Este exemplo mostra como criar uma lista de lielementos e anexá-los ao ulelemento:

let app = document.querySelector('#app');

let langs = ['CSS','JavaScript','TypeScript'];

let nodes = langs.map(lang => {
    let li = document.createElement('li');
    li.textContent = lang;
    return li;
});

app.prepend(...nodes);Linguagem de código:  JavaScript  ( javascript )

HTML de saída:

<ul id="app">
    <li>CSS</li>
    <li>JavaScript</li>
    <li>TypeScript</li>
    <li>HTML</li>
</ul>Linguagem de código:  HTML, XML  ( xml )

Como funciona:

• Primeiro, selecione o ulelemento por seu id usando o método querySelector().
• Segundo, declare um array de strings.
• Terceiro, para cada elemento em uma matriz, crie um novo lielemento com o textContenté atribuído ao elemento da matriz.
• Finalmente, acrescente os lielementos ao ulelemento pai usando o prepend()método.

2) Usando o método prepend() para acrescentar texto a um exemplo de elemento

Suponha que você tenha o seguinte elemento:

<div id="app"></div>Linguagem de código:  HTML, XML  ( xml )

O seguinte mostra como usar o prepend()método para preceder um texto ao <div>elemento acima:

let app = document.querySelector('#app');
app.prepend('prepend() Text Demo');

console.log(app.textContent);Linguagem de código:  JavaScript  ( javascript )

HTML de saída:

<div id="app">prepend() Text Demo</div>Linguagem de código:  HTML, XML  ( xml )

Resumo

• Use o parentNode.prepend()método para preceder uma lista de Nodeobjetos ou DOMStringobjetos antes do primeiro nó filho do nó pai.