diff options
Diffstat (limited to 'files/pt-br/web/api/node/insertbefore/index.html')
| -rw-r--r-- | files/pt-br/web/api/node/insertbefore/index.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/files/pt-br/web/api/node/insertbefore/index.html b/files/pt-br/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..d556885be7 --- /dev/null +++ b/files/pt-br/web/api/node/insertbefore/index.html @@ -0,0 +1,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> |