Cara Membuat Elemen DOM daripada Rentetan HTML (Berbilang Kaedah)-tutorial js-php.cn

Cara Membuat Elemen DOM daripada Rentetan HTML (Berbilang Kaedah)

PHPz

Lepaskan： 2024-08-01 20:18:42

asal

1197 orang telah melayarinya

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

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

Salin selepas log masuk

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.

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

Salin selepas log masuk

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

How to Create DOM Elements from HTML Strings (Multiple Methods)

masukkanAdjacentHTML

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

Salin selepas log masuk

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

DOMParser

Cara Membuat Elemen DOM daripada Rentetan HTML (Berbilang Kaedah)

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

Salin selepas log masuk

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

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

Salin selepas log masuk

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.

How to Create DOM Elements from HTML Strings (Multiple Methods)

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.

How to Create DOM Elements from HTML Strings (Multiple Methods)

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!