Resumo : neste tutorial, você aprenderá sobre o prepend()
método JavaScript que insere Node
objetos ou DOMString
objetos antes do primeiro filho de um nó pai.
Introdução ao método JavaScript prepend()
O prepend()
método insere um conjunto de Node
objetos ou DOMString
objetos 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 DOMString
objetos como Text
nó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 li
elementos e anexá-los ao ul
elemento:
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
ul
elemento por seu id usando o método querySelector(). - Segundo, declare um array de strings.
- Terceiro, para cada elemento em uma matriz, crie um novo
li
elemento com otextContent
é atribuído ao elemento da matriz. - Finalmente, acrescente os
li
elementos aoul
elemento pai usando oprepend()
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 deNode
objetos ouDOMString
objetos antes do primeiro nó filho do nó pai.