1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
---
title: element.insertBefore
slug: DOM/element.insertBefore
tags:
- Referência_do_DOM_Gecko
translation_of: Web/API/Node/insertBefore
---
<p>{{ ApiRef() }}</p>
<h3 id="Sum.C3.A1rio" name="Sum.C3.A1rio">Sumário</h3>
<p>Insere um nó filho ao nó atual, antes de um determinado elemento.</p>
<h3 id="S.C3.ADntaxe" name="S.C3.ADntaxe">Síntaxe</h3>
<pre class="eval">var<i>insertedElement</i> =<i>parentElement</i>.insertBefore(<i>newElement</i>,<i>referenceElement</i>)
</pre>
<p>If <var>referenceElement</var> is <code>null</code>, <var>newElement</var> is inserted at the end of the list of child nodes.</p>
<ul>
<li><code>insertedElement</code> é o novo inserido,ou seja é o <code>newElement</code></li>
<li><code>parentElement</code> é o elemento pai que receberá o novo nó inserido.</li>
<li><code>newElement</code> é o novo elemento que será inserido</li>
<li><code>referenceElement</code> o novo nó ficará antes desse elemento</li>
</ul>
<p>Se <var>referenceElement</var> é <code>null</code> o elemento é inserido em último lugar na lista de nós filhos. Ver <code><a href="pt/DOM/element.childNodes">childNodes</a></code></p>
<h3 id="Exemplo" name="Exemplo">Exemplo</h3>
<pre> <html>
<head>
<title>Gecko DOM insertBefore test</title>
</head>
<body>
<div>
<span id="childSpan">foo bar</span>
</div>
<script type="text/javascript">
// cria um elemento vazio
// sem ID ou qualquer outro atributo
var sp1 = document.createElement("span");
// atribui o ID 'newSpan' para o elemento criado
sp1.setAttribute("id", "newSpan");
//cria um conteudo para o novo elemento,um texto curto
var sp1_content = document.createTextNode("This is a new span element. ");
// adiciona o conteúdo a novo elemento
sp1.appendChild(sp1_content);
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;
// insere o novo elemento antes sp2
parentDiv.insertBefore(sp1, sp2);
</script>
</body>
</html>
</pre>
<p>Não há um método <code>insertAfter</code>(insere depois), porém pode se obter um resultado semelhante usando a combinação entre <code>insertBefore</code> e <code><a href="pt/DOM/element.nextSibling">nextSibling</a></code>. Por exemplo, <code>sp1</code> pode inserido depois de <code>sp2</code> usando comando parentDiv.insertBefore(sp1, sp2.nextSibling); Se a propridade <code>nextSibling</code> retornar <code>null</code> indica que o elemento é o último nó filho, logo novo elemento será incluído no final da lista de nós filhos</p>
<p> </p>
<h3 id="Espefica.C3.A7.C3.A3o" name="Espefica.C3.A7.C3.A3o">Espeficação</h3>
<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore </a></p>
<p>{{ languages( { "en": "en/DOM/element.insertBefore", "pl": "pl/DOM/element.insertBefore", "fr": "fr/DOM/element.insertBefore" } ) }}</p>
|
