HTML DOM Element insertBefore() yöntemi

Tanım ve kullanım

insertBefore() Yöntem, mevcut alt elemanlar arasında alt eleman ekler.

Ayrıca bakınız:

appendChild() yöntemi

replaceChild() yöntemi

removeChild() yöntemi

remove() yöntemi

childNodes özelliği

firstChild özelliği

lastChild özelliği

firstElementChild özelliği

lastElementChild özelliği

Örnek

Örnek 1

  1. <li> elementi oluşturun
  2. Metin düğümü oluşturun
  3. <li> elementine metin ekleyin
  4. Önceki <ul> alt elemanı öncesine <li> elementi ekleyin:
const newNode = document.createElement("li");
const textNode = document.createTextNode("Su");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Kişisel olarak deneyin

Örnek 2

Bir listeden sonuncu elemanı diğer bir listenin başına taşıyın:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

Kişisel olarak deneyin

Örnek 3

Bir listeden sonuncu elemanı diğer bir listenin sonuna taşıyın:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

Kişisel olarak deneyin

Sözdizimi

element.insertBefore(newnode, existingnode)

veya

node.insertBefore(newnode, existingnode)

Parametreler

Parametreler Açıklama
newnode Gerekli. Eklenecek düğüm (element).
existingnode

Opsiyonel. Yeni düğümün önceki düğümün alt düğümü olarak eklenebilir.

Belirtilmemişse, insertBefore yöntemi newnode'yi sonuna ekler.

Dönüş Değeri

Tür Açıklama
Düğüm Eklenecek düğüm.

Tarayıcı Desteği

element.insertBefore() Bu, DOM Level 1 (1998) özelliğidir.

Tüm tarayıcılar tamamen bu özelliği destekler:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek 9-11 Destek Destek Destek Destek