Cara Membuat Elemen DOM daripada Rentetan HTML (Berbilang Kaedah)

Apabila kita perlu mencipta elemen DOM HTML dinamik yang ringkas, kita boleh menggunakan templat rentetan HTML. Terdapat banyak kaedah berbeza untuk mencapai ini dalam JavaScript, tetapi kami mungkin mempunyai beberapa pertimbangan.

---

innerHTML

const container = document.createElement('div');
container.innerHTML = `<div>Hello World</div>`;
const node = container.firstElementChild;

Ini adalah salah satu kaedah yang paling biasa. Masukkan rentetan HTML ke dalam innerHTML elemen bekas, kemudian akses nod DOM yang dijana.

Walau bagaimanapun, ia hanya boleh mengendalikan nod HTML yang sah, iaitu, elemen yang sah dalam struktur HTML standard. Contohnya, jika anda cuba memasukkan elemen menjadi

, nod tidak akan dibuat.

Selain itu, kaedah ini tidak akan melaksanakan sebarang skrip dalam rentetan HTML, yang lebih selamat apabila berurusan dengan kandungan yang tidak dipercayai.

innerHTML + Elemen templat

const template = document.createElement('template');
template.innerHTML = `<div>Hello World</div>`;
const node = template.content.firstElementChild;

Kelebihan menggunakan teg ialah ia tidak mempunyai sekatan kandungan dan boleh mengandungi sebarang jenis struktur HTML, termasuk elemen berkaitan jadual seperti dan .

masukkanAdjacentHTML

const container = document.createElement("div");
container.insertAdjacentHTML("afterbegin", `<div>Hello World</div>`);
const node = container.firstElementChild;

Kaedah ini serupa dengan innerHTML dan hanya boleh mengendalikan nod HTML yang sah. Ia juga tidak akan melaksanakan skrip.

DOMParser

const node = new DOMParser().parseFromString(`<div>Hello World</div>`, "text/html").body.firstElementChild;

Kaedah ini menghuraikan rentetan dengan mencipta dokumen HTML penuh dan kemudian mengekstrak nod daripada dokumen. Ini bermakna ia agak perlahan daripada penyelesaian lain dan tidak disyorkan untuk digunakan.

Ia hanya boleh mengendalikan nod HTML yang sah dan tidak akan melaksanakan skrip.

Range.createContextualFragment

const node = document.createRange().createContextualFragment(`<div>Hello World</div>`).firstElementChild;

Kaedah ini mungkin yang paling mudah. Ia juga hanya boleh mengendalikan nod HTML yang sah secara lalai. Walau bagaimanapun, kita boleh menetapkan konteks untuk mengelakkan perkara ini.

Perhatikan bahawa ia akan melaksanakan skrip dalam rentetan HTML, jadi berhati-hati terutamanya apabila berurusan dengan kandungan yang tidak dipercayai, seperti menggunakan pembersih seperti DOMPurify.

Kesimpulan

Untuk kes yang berbeza, anda mungkin perlu memilih kaedah yang paling sesuai untuk anda.

Jika anda mendapati kandungan saya membantu, sila pertimbangkan untuk melanggan. Saya menghantar surat berita harian dengan kemas kini pembangunan web terkini. Terima kasih atas sokongan anda!

Atas ialah kandungan terperinci Cara Membuat Elemen DOM daripada Rentetan HTML (Berbilang Kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html String if for try using default dom this innerHTML table td tr Access

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