---
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">&lt;div id="elementoPai"&gt;
  &lt;span id="elementoFilho"&gt;foo bar&lt;/span&gt;
&lt;/div&gt;

&lt;script&gt;
// Cria um novo elemento &lt;span&gt; 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);
&lt;/script&gt;
</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>