Skip to main content

Visit Mozilla.org

DOM:element.insertBefore

z Mozilla Developer Center, polskiego centrum programistów Mozilli.

« Dokumentacja Gecko DOM

Spis treści

[edytuj] Podsumowanie

Wstawia określony węzeł przed danym elementem jako dziecko aktualnego węzła.

[edytuj] Składnia 

var wstawionyElement = elementRodzic.insertBefore(nowyElement, danyElement)

Jeżeli danyElement ma wartość null, nowyElement jest wstawiany na końcu listy węzłów potomnych.

  • nowyElement Węzeł do wstawienia.
  • danyElement Węzeł przed którym nowyElement ma zostać wstawiony.
  • elementRodzic Rodzic nowo wstawianego elementu.
  • wstawionyElement Węzeł, który jest wstawiany, czyli nowyElement.

[edytuj] Przykład 

 <html>

 <head>
 <title>Gecko DOM insertBefore test</title>
 </head>

 <body>
 <div>
   <span id="childSpan">foo bar</span>
 </div>

 <script type="text/javascript">
 // tworzy pusty węzeł elementu
 // bez ID, jakichkolwiek atrybutów lub jakiejkolwiek zawartości
 var sp1 = document.createElement("span");

 // daje to atrybut id nazwany 'newSpan'
 sp1.setAttribute("id", "newSpan");

 // tworzy jakąś zawartość dla nowo powstałego elementu.
 var sp1_content = document.createTextNode("Jest to nowy element span. ");

 // zwraca się, która treść ma być do nowego elementu.
 sp1.appendChild(sp1_content);

 var sp2 = document.getElementById("childSpan");
 var parentDiv = sp2.parentNode;

 // wstawia nowy element do DOM przed sp2
 parentDiv.insertBefore(sp1, sp2);
 </script>

 </body>
 </html>

Nie istnieje metoda insertAfter, jednak można ją emulować poprzez kombinację insertBefore oraz nextSibling.

W powyższym przykładzie, sp1 może zostać wstawiona za sp2 przy użyciu: 

parentDiv.insertBefore(sp1, sp2.nextSibling);

Jeżeli sp2 nie posiada następnego rodzeństwa i musi być ostatnim potomnym —sp2.nextSibling to zwróci null więc sp1 będzie wstawione na końcu listy węzłów potomnych (np. natychmiast po sp2).

[edytuj] Specyfikacja

insertBefore

Źródło: "http://developer.mozilla.org/pl/docs/DOM:element.insertBefore"