mozilla

Revision 187392 of element.insertBefore

  • Slug da revisão: DOM/element.insertBefore
  • Título da revisão: element.insertBefore
  • ID da revisão: 187392
  • Criado:
  • Autor: Codigo13
  • É revisão atual? Não
  • Comentário /* Espeficação */

Conteúdo da revisão

{{ DomRef() }}

Sumário

Insere um nó filho ao nó atual, antes de um determinado elemento.

Síntaxe

var insertedElement = parentElement.insertBefore(newElement, referenceElement)

If referenceElement is null, newElement is inserted at the end of the list of child nodes.

  • insertedElement é o novo inserido,ou seja é o newElement
  • parentElement é o elemento pai que receberá o novo nó inserido.
  • newElement é o novo elemento que será inserido
  • referenceElement o novo nó ficará antes desse elemento

Se referenceElement é null o elemento é inserido em último lugar na lista de nós filhos. Ver childNodes

Exemplo

 <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>

Não há um método insertAfter(insere depois), porém pode se obter um resultado semelhante usando a combinação entre insertBefore e nextSibling. Por exemplo, sp1 pode inserido depois de sp2 usando comando parentDiv.insertBefore(sp1, sp2.nextSibling); Se a propridade nextSibling retornar null indica que o elemento é o último nó filho, logo novo elemento será incluído no final da lista de nós filhos


Espeficação

insertBefore

{{ languages( { "en": "en/DOM/element.insertBefore", "pl": "pl/DOM/element.insertBefore", "fr": "fr/DOM/element.insertBefore" } ) }}

Fonte da revisão

<p>
{{ DomRef() }}
</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> &lt;html&gt;

 &lt;head&gt;
 &lt;title&gt;Gecko DOM insertBefore test&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div&gt;
   &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;
 &lt;/div&gt;

 &lt;script type="text/javascript"&gt;
 // 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);
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;
</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><br>
</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>{{ languages( { "en": "en/DOM/element.insertBefore", "pl": "pl/DOM/element.insertBefore", "fr": "fr/DOM/element.insertBefore" } ) }}
Reverter para esta revisão