Metode insertBefore() DOM Element HTML

Definisi dan penggunaan

insertBefore() Metode menambahkan anak di depan anak yang ada.

Lihat pula:

Metode appendChild()

Metode replaceChild()

Metode removeChild()

Metode remove()

Atribut childNodes

Atribut firstChild

Atribut lastChild

Atribut firstElementChild

Atribut lastElementChild

Contoh

Contoh 1

  1. Buat elemen <li>
  2. Buat node teks
  3. Tambahkan teks ke elemen <li>
  4. Masukkan elemen <li> sebelum pertama anak di dalam <ul>:
const newNode = document.createElement("li");
const textNode = document.createTextNode("Air");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Coba Sendiri

Contoh 2

Pindahkan elemen terakhir dari satu daftar ke awal daftar lain:

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

Coba Sendiri

Contoh 3

Pindahkan elemen terakhir dari satu daftar ke akhir daftar lain:

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

Coba Sendiri

Syarat

element.insertBefore(newnode, existingnode)

atau

node.insertBefore(newnode, existingnode)

Parameter

Parameter Deskripsi
newnode Wajib. Node yang akan disisipkan (elemen).
existingnode

Pilihan. Sisipkan anak node baru sebelum node yang ada.

Jika belum disesuaikan, metode insertBefore akan menambahkan newnode di akhir.

Nilai Kembalian

Tipe Deskripsi
Node Node yang disisipkan.

Dukungan Peramban

element.insertBefore() Adalah Fitur DOM Level 1 (1998).

Semua peramban mendukungnya penuhnya:

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