Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Mencipta Elemen DOM daripada Rentetan HTML Tanpa jQuery?
Bagaimanakah Saya Boleh Mencipta Elemen DOM daripada Rentetan HTML Tanpa jQuery?
- DDDasal
- 2024-12-24 09:20:25728semak imbas
Membuat Elemen DOM daripada Rentetan HTML
Walaupun jQuery menawarkan mekanisme yang mudah untuk mencipta elemen DOM daripada rentetan HTML, fungsi ini juga boleh dicapai menggunakan kaedah DOM terbina dalam atau melalui perpustakaan Prototaip.
DOM Kaedah
Untuk pelayar lama, serta nod/jsdom (yang pada masa penulisan tidak menyokong elemen HTML), kaedah berikut boleh digunakan:
function createElementFromHTML(htmlString) {
var div = document.createElement('div');
div.innerHTML = htmlString.trim();
// Change this to div.childNodes to support multiple top-level nodes.
return div.firstChild;
}
Adalah penting untuk ambil perhatian bahawa kaedah ini tidak akan berfungsi untuk sesetengah elemen yang tidak boleh menjadi anak
Perpustakaan Prototaip
Sebagai alternatif, perpustakaan Prototaip menyediakan kaedah terbina dalam untuk mencipta elemen daripada rentetan HTML melalui kaedah kemas kini()nya. Berikut ialah contoh:
var element = $(document.createElement('li')).update('<li>text</li>');
Kes Penggunaan
Kedua-dua kaedah DOM terbina dalam dan perpustakaan Prototaip menawarkan cara yang boleh dipercayai untuk mencipta elemen DOM daripada rentetan HTML, terutamanya untuk pelayar lama atau dalam senario di mana jQuery tidak digunakan. Kaedah ini menyediakan pendekatan yang fleksibel dan mantap untuk menjana kandungan DOM secara dinamik berdasarkan penanda HTML.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Elemen DOM daripada Rentetan HTML Tanpa jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional