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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
---
title: Node.insertBefore
slug: Web/API/Node/insertBefore
translation_of: Web/API/Node/insertBefore
---
<div>
<div>{{ApiRef("DOM")}}</div>
</div>
<p>O método <strong><code>Node.insertBefore()</code> </strong>insere um nó antes do nó de referência como um filho de um nó pai especificado. Se o filho especificado for uma referência a um nó existente no documento, <code>insertBefore()</code> o moverá de sua posição atual para a nova posição (não há necessidade de remover o nó de seu nó pai antes de anexá-lo a outro nó).</p>
<p>Isso significa que um nó não pode estar em dois pontos do documento simultaneamente. Portanto, se o nó já tiver um pai, o nó será removido pela primeira vez e inserido na nova posição. O {{domxref("Node.cloneNode()")}} pode ser usado para fazer uma cópia do nó antes de anexá-lo ao novo pai. Note que as cópias feitas com <code>cloneNode()</code> não serão automaticamente mantidas em sincronia.</p>
<p> </p>
<p>Se o nó de referência for <code>null</code>, o nó especificado será incluído no final da lista de filhos do nó pai especificado.</p>
<p>Se o filho especificado for um {{domxref("DocumentFragment")}}, todo o conteúdo do <code>DocumentFragment</code> será movido para a lista de filhos do nó pai especificado.</p>
<p> </p>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<pre class="syntaxbox">var <em>elementoInserido</em> = <em>elementoPai</em>.insertBefore(<em>novoElemento</em>, <em>elementoDeReferencia</em>);
</pre>
<p> </p>
<ul>
<li><code>elementoInserido</code> O nó sendo inserido, que é <code>novoElemento</code></li>
<li><code>elementoPai</code> Pai do nó recentemente inserido.</li>
<li><code>novoElemento</code> O nó a ser inserido.</li>
<li><code>elementoDeReferencia</code> O nó antes do qual o <code>novoElemento</code> será inserido.</li>
</ul>
<p> </p>
<p>Se <var>elementoDeReferencia</var> for <code>null</code>, <var>novoElemento</var> será inserido no fim da lista de nós filhos.</p>
<div class="blockIndicator note">
<p><code>elementoDeReferencia</code> não é um parâmetro opcional - você deve passar explicitamente um <code>Node</code> ou <code>null</code>. Deixar de fornecer ou passar valores inválidos pode <a href="https://code.google.com/p/chromium/issues/detail?id=419780">ter comportamento diferente</a> em diferentes versões de navegadores.</p>
</div>
<p> </p>
<h3 id="Return_value">Return value</h3>
<p>O valor retornado é o filho incluído, exceto quando <code>newNode</code> é um {{domxref("DocumentFragment")}}, caso em que o {{domxref("DocumentFragment")}} vazio é retornado.</p>
<p> </p>
<h2 id="Example" name="Example">Exemplo</h2>
<pre class="brush:html"><div id="elementoPai">
<span id="elementoFilho">foo bar</span>
</div>
<script>
// Cria um novo elemento <span> vazio
var sp1 = document.createElement("span");
// Guarda a <span style="line-height: normal;">referência</span><span style="line-height: normal;"> do elemento atraś do qual nos queremos inserir o novo elemento</span>
var sp2 = document.getElementById("<span style="line-height: normal;">elementoFilho</span><span style="line-height: normal;">");</span>
// Guarda a referência do elemento pai
var divPai = sp2.parentNode;
// Insere o novo elemento no DOM antes de sp2
<span style="line-height: normal;">divPai</span>.insertBefore(sp1, sp2);
</script>
</pre>
<p>Não existe um método <code>insertAfter</code>. Mas ele pode ser emulado combinando o método <code>insertBefore</code> com <code><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p>
<p>No exemplo anterior, <code>sp1</code> poderia ser inserido após <code>sp2</code> desta forma:</p>
<pre><code>divPai.insertBefore(sp1, sp2.nextSibling);</code></pre>
<p>Se <code>sp2</code> não possuir um próximo nó, significa que ele deve ser o último filho — <code>sp2.nextSibling</code> retorna <code>null</code>, e <code>sp1</code> é inserido ao fim da da lista de nós filhos (logo após sp2).</p>
<h2 id="Example2" name="Example2">Exemplo 2</h2>
<p>Inserir um elemento antes do primeiro nó filho, usando a propriedade <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a>.</p>
<pre class="brush:js">// Guarda a referêncis do elemento no quela nóe queremos inserir o novo nó
var elementoPai = document.getElementById('<span style="line-height: normal;">elementoPai</span><span style="line-height: normal;">');</span>
// Guarda a referência do primeiro filho
var primeiroFilho = elementoPai.firstChild;
// Cria um novo elemento
var novoElemento = document.createElement("div");
// Insere o novo elemento antes do primeiro filho
elementoPai.insertBefore(novoElemento, primeiroFilho);
</pre>
<p>Quando o elemento não possui o primeiro filho, então <code>firstChild</code> é <code>null</code>. O elemento ainda será inserido no pai, mas após o último filho. Pois se o elemento pai não possui primeiro filho, ele também não possui o último filho. Conseqüentemente, o novo elemento será o único elemento após a inserção.</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de navegadores</h2>
<p>{{CompatibilityTable()}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Funcionalidade</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Funcionalidade</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Specification" name="Specification">Especificação</h2>
<ul>
<li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore</a></li>
</ul>
|
