Bagaimana untuk Memasukkan Elemen Selepas Elemen Lain dalam JavaScript?

Memasukkan Elemen Selepas Yang Lain dalam JavaScript

Memasukkan elemen selepas nod sedia ada ialah operasi biasa dalam JavaScript. Walau bagaimanapun, walaupun terdapat kaedah insertBefore(), ia hanya boleh menambah elemen sebelum nod rujukan. Untuk memasukkan elemen selepas, kita memerlukan pendekatan alternatif.

Penyelesaian tanpa Perpustakaan

Untuk memasukkan elemen demi elemen tanpa menggunakan perpustakaan, kita boleh menggunakan kod berikut:

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

Berikut ialah pecahan:

• rujukanNod: Unsur selepas itu kami mahu memasukkan nod baharu.
• parentNode: Elemen induk referenceNode.
• nextSibling: Adik beradik seterusnya referenceNode, yang akan menjadi batal jika referenceNode ialah anak terakhir.

Jika referenceNode ialah anak terakhir, adik beradik seterusnya akan menjadi batal. insertBefore mengendalikan kes ini dengan menambahkan nod baharu pada penghujung senarai.

Fungsi Boleh Digunakan Semula

Kita boleh membungkus fungsi ini dalam fungsi boleh guna semula:

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

Contoh

Untuk menguji ini fungsi, kita boleh menggunakan coretan berikut:

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

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

Ini akan mencipta elemen span baharu dengan teks "test" dan memasukkannya selepas elemen div dengan ID "foo."

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