Membandingkan kaedah untuk menambahkan dan memasukkan dengan JavaScript

Dinamik mengemas kini laman web selepas beban awal sering memerlukan kaedah JavaScript, AppendChild, InsertAdJaceentHTML, atau innerHTML. Memilih kaedah yang betul bergantung kepada beberapa faktor, termasuk jenis kandungan yang ditambah dan keserasian penyemak imbas.

Memahami dom

Laman web pada dasarnya adalah fail HTML yang diberikan oleh penyemak imbas ke dalam Pokok Model Objek Dokumen (DOM). Pokok ini terdiri daripada objek bersarang yang mewakili elemen HTML (nod). Terma seperti "nod," "elemen," dan "objek" sering digunakan secara bergantian, dengan "objek" menjadi yang paling umum dan "elemen HTML" yang paling spesifik. Memahami hierarki ini penting untuk memanipulasi DOM dengan JavaScript.

Menambah dan memasukkan kaedah

Kebanyakan kaedah tambahan/sisipan mengikuti corak ini: Element.method(content) . Untuk mensasarkan elemen, gunakan kaedah seperti document.querySelector() , document.getElementById() , atau document.getElementsByClassName() . Ingatlah bahawa getElementsByClassName() mengembalikan array.

Jenis Kandungan dan Keserasian Kaedah

Pilihan kaedah sangat bergantung pada jenis kandungan:

• Nod: Dibuat menggunakan document.createElement() atau dipilih dari DOM. appendChild dan append kerja dengan nod.
• Teks biasa: rentetan teks mudah. Kebanyakan kaedah menyokong teks biasa.
• HTML: HTML Strings. insertAdjacentHTML dan innerHTML Handle HTML secara langsung.

Berikut adalah ringkasan keserasian kaedah:

Memilih kaedah yang betul

• HTML yang sedia ada: Kaedah yang menyokong HTML (contohnya, insertAdjacentHTML ) adalah yang paling mudah.
• HTML baru dalam JavaScript: Membuat nod untuk HTML kompleks boleh menjadi rumit; String HTML lebih ringkas.
• Pendengar Acara: Gunakan nod ( appendChild , append ) untuk lampiran pendengar acara segera.
• Teks biasa sahaja: Mana -mana kaedah yang menyokong kerja teks biasa.
• HTML yang tidak dipercayai: Sanitize html yang diselaraskan pengguna sebelum menggunakan insertAdjacentHTML atau innerHTML .
• Keserasian Internet Explorer: Elakkan append jika sokongan IE diperlukan.

Contoh: Menambah ke senarai kawan

Mari kita tambahkan pengguna baru, "Dale," ke senarai buddy menggunakan kaedah yang berbeza. Menganggap senarai itu ada<ul id="buddies"></ul> dengan <li><a>...</a></li> barang.

append

 const newBuddy = document.createElement ('li');
const newLink = document.createElement ('a');
newLink.Append ("Dale");
newBuddy.Append (NewLink);
Document.QuerySelector ('##kawan'). append (newBuddy);

appendChild

 const newBuddy = document.createElement ('li');
const newLink = document.createElement ('a');
newLink.TextContent = "Dale";
newBuddy.AppendChild (NewLink);
Document.QuerySelector ('#Buddies'). AppendChild (newBuddy);

insertAdjacentHTML

 Document.QuerySelector ('#Buddies'). InsertAdJacentHtml ('Sebelumend', '

innerHTML (tidak disyorkan untuk menambahkan)

 Document.QuerySelector ('#Buddies'). InnerHtml = '

innerHTML bermasalah kerana ia menggantikan keseluruhan HTML dalaman, berpotensi mengeluarkan pendengar acara.

Demo dan rekap

Demo komprehensif yang mempamerkan semua kaedah akan bermanfaat di sini (kod yang ditinggalkan untuk keringkasan). Ringkasnya:

• Elakkan innerHTML untuk menambahkan kerana kehilangan pendengar acara.
• append menawarkan fleksibiliti dan cekap untuk kes -kes mudah tetapi tidak mempunyai sokongan IE.
• appendChild secara meluas dan sesuai untuk manipulasi nod.
• insertAdjacentHTML menyediakan penempatan yang tepat dan mengendalikan rentetan HTML dengan berkesan, tetapi memerlukan sanitisasi input pengguna yang teliti.

Penjelajahan lanjut before , after , insertBefore , dan insertAdjacentElement digalakkan untuk manipulasi DOM yang lebih maju.

Atas ialah kandungan terperinci Membandingkan kaedah untuk menambahkan dan memasukkan dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!