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

Memasukkan Elemen Selepas Satu Lagi dalam JavaScript Tanpa Pustaka Luaran

Dalam bidang JavaScript, pengaturcara sering berusaha untuk memanipulasi elemen dalam DOM. Walaupun jQuery dan perpustakaan lain memudahkan tugas sedemikian, adalah mungkin untuk mencapai sisipan elemen tanpa bergantung pada kebergantungan luaran.

Soalan:

Bagaimanakah elemen boleh disisipkan selepas elemen lain dalam JavaScript tanpa bantuan perpustakaan seperti jQuery?

Jawapan:

Untuk memasukkan elemen selepas nod sedia ada, JavaScript menyediakan kaedah insertBefore(). Walau bagaimanapun, tidak seperti tujuan utama insertBefore() untuk memasukkan sebelum nod rujukan, kami boleh memanfaatkannya untuk mencapai matlamat kami.

Coretan berikut menunjukkan cara:

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

di mana:

• referenceNode mewakili elemen yang selepas itu anda mahu memasukkan yang baharu elemen
• parentNode mendapatkan semula elemen induk nod rujukan
• nextSibling merujuk kepada elemen sejurus selepas nod rujukan. Jika nod rujukan ialah anak terakhir, nextSibling akan menjadi batal dan insertBefore() akan mengendalikan kes ini dengan menambahkan pada penghujung senarai.

Fungsi Contoh:

Fungsi ringkas boleh dibuat untuk merangkum ini operasi:

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

Menguji Fungsi:

Untuk mengesahkan kod kami, kami 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);

Kod ini akan memasukkan ujian elemen selepas