Bagaimana untuk Memasukkan Elemen Selepas Satu Lagi dalam JavaScript Tanpa Perpustakaan?

Memasukkan Elemen Selepas Yang Lain dalam JavaScript Tanpa Pustaka

Dalam JavaScript, kaedah insertBefore() wujud untuk memasukkan elemen sebelum rujukan yang ditentukan nod. Walau bagaimanapun, bagaimana jika anda ingin memasukkan elemen demi elemen lain tanpa bergantung pada jQuery atau perpustakaan lain?

Jawapan

Coretan berikut ialah perkara yang anda perlukan:

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

Begini caranya berfungsi:

• referenceNode mewakili nod selepas itu anda mahu memasukkan nod baharu (newNode).
• referenceNode.parentNode mendapat nod induk referenceNode.
• referenceNode.nextSibling mengenal pasti adik beradik seterusnya bagi referenceNode. Jika referenceNode ialah anak terakhir, nextSibling akan menjadi batal. Kes ini dikendalikan dengan sewajarnya oleh insertBefore(), yang dilampirkan pada penghujung senarai anak.

Kod Contoh

Untuk menggunakan penyelesaian ini, anda boleh tentukan fungsi berikut:

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

Anda kemudian boleh menggunakan fungsi ini seperti jadi:

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

Kod ini akan memasukkan elemen span dengan teks "test" selepas div dengan id "foo".

Atas ialah kandungan terperinci Bagaimana untuk Memasukkan Elemen Selepas Satu Lagi dalam JavaScript Tanpa Perpustakaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!