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 Text
nó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 HierarchyRequestError
exceçã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 ...items
usa o operador spread para espalhar o elemento da items
matriz.
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 Text
nó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 )
Resumo
- Use o
element.before()
método para inserir um ou mais nós antes do elemento.