Anexação de JavaScript

Resumo : neste tutorial, você aprenderá como usar o append()método JavaScript para inserir um conjunto de Nodeobjetos ou DOMStringobjetos após o último filho de um nó pai.

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

O parentNode.append()método insere um conjunto de Nodeobjetos ou DOMStringobjetos após o último filho de um nó pai :

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

O append()método irá inserir DOMStringobjetos como Textnós.

Observe que a DOMStringé uma string UTF-16 que mapeia diretamente para uma string.

O append()método não tem valor de retorno. Isso significa que o append()método retorna implicitamente undefined.

Exemplos de métodos JavaScriptappend()

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

1) Usando o método append() para anexar um exemplo de elemento

Suponha que você tenha o seguinte ulelemento:

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

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

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

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

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

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

HTML de saída:

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

Como funciona:

• Primeiro, selecione o ulelemento por meio do idmétodo querySelector().
• Segundo, declare uma série de idiomas.
• Terceiro, para cada idioma, crie um novo lielemento com o textContenté atribuído ao idioma.
• Finalmente, anexe lielementos ao ulelemento usando o append()método.

2) Usando o método append() para anexar texto a um exemplo de elemento

Suponha que você tenha o seguinte HTML:

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

Você pode usar o append()método para anexar um texto a um elemento:

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

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

HTML de saída:

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

anexar vs. anexarChild()

Aqui estão as diferenças entre append()e appendChild():

Diferenças	append()	appendChild()
Valor de retorno	undefined	NodeO objeto anexado
Entrada	Vários Nodeobjetos	Um único Nodeobjeto
Tipos de parâmetros	Aceite NodeeDOMString	ApenasNode

Resumo

• Use o parentNode.append()método para anexar um conjunto de Nodeobjetos ou DOMStringobjetos após o último nó filho do arquivo parentNode.