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

elemen dengan id "foo".

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

JavaScript jquery NULL if while using function dom this Other

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn