Perbandingan mendetail dari js AppendChild dan insertBefore penggunaan

Kita tahu bahwa appendChild dan insertBefore keduanya memiliki fungsi menyisipkan node. Namun dalam penerapannya, masih terdapat beberapa perbedaan di antara keduanya.

Misalnya ketika kita ingin menyisipkan node anak P pada div berikut:

<div id="test"><p id="x1">Node</p><p>Node</p></div>

Kita dapat menulis seperti ini (silakan tambahkan komentar lain ketika menguji situasi tertentu):

Copy kode kodenya sebagai berikut:

<skrip tipe="teks/javascript">

var oTest = document.getElementById("test");

var newNode = dokumen.createElement("p");

newNode.innerHTML = "Ini adalah ujian";

//Tes dimulai di sini

//metode appendChild:

oTest.appendChild(Node baru);

// metode insertBefore:

oTest.insertBefore(newNode,null);

</skrip>

Melalui kode di atas, Anda dapat menguji apakah node baru dibuat di bawah div node, dan node ini adalah node terakhir dari div tersebut. (Untuk melihat DOM, IE dapat melihatnya melalui plug-in IE Developer Toolbar, dan Firefox dapat menggunakan Firebug)

Jelasnya, melalui contoh ini, kita dapat mengetahui bahwa appendChildhild dan insertBefore dapat menyisipkan node.

Pada contoh di atas, terdapat kode seperti ini: oTest.insertBefore(newNode,null). Di sini insertBefore memiliki dua parameter yang dapat diatur. Yang pertama sama dengan appendChild, tetapi yang kedua unik untuknya. Tidak hanya bisa nol, tapi bisa juga:

Copy kode kodenya sebagai berikut:

<skrip tipe="teks/javascript">

var oTest = document.getElementById("test");

var refChild = dokumen.getElementById("x1");

var newNode = dokumen.createElement("p");

newNode.innerHTML = "Ini adalah ujian";

oTest.insertBefore(newNode,refChild);

</skrip>

Contoh ini akan menyisipkan node baru di depan node x1

Atau:

Copy kode kodenya sebagai berikut:

<skrip tipe="teks/javascript">

var oTest = document.getElementById("test");

var refChild = dokumen.getElementById("x1");

var newNode = dokumen.createElement("p");

newNode.innerHTML = "Ini adalah ujian";

oTest.insertBefore(newNode,refChild.nextSibling);

</skrip>

Contoh ini akan menyisipkan node baru sebelum node berikutnya dari node x1

Juga tersedia untuk:

Copy kode kodenya sebagai berikut:

<skrip tipe="teks/javascript">

var oTest = document.getElementById("test");

var newNode = dokumen.createElement("p");

newNode.innerHTML = "Ini adalah ujian";

oTest.insertBefore(newNode,oTest.childNodes[0]);

</skrip>

Contoh ini akan menyisipkan node baru di depan node anak pertama. Anda juga dapat menyisipkan node baru di lokasi lain dengan mengubah childNodes[0,1,...]

Karena terlihat bahwa metode insertBefore() adalah dengan menyisipkan node baru di depan node anak yang sudah ada, namun pada Contoh 1, metode insertBefore() juga dapat digunakan untuk menyisipkan node baru di akhir node anak. daftar simpul. Menggabungkan dua situasi, ditemukan bahwa metode insertBefore() dapat menyisipkan node di posisi mana pun dalam daftar node anak.

Dari contoh berikut:

Metode appendChild() menambahkan node anak baru ke akhir daftar node anak.

Metode insertBefore() menyisipkan node baru di posisi mana pun dalam daftar node anak node.