Katakan anda mempunyai beberapa HTML yang merupakan rentetan:
let string_of_html = ` Cool `;Mungkin ia berasal dari API atau anda telah membuatnya sendiri dari literal templat atau sesuatu.
Anda boleh menggunakannya innerHTMLuntuk memasukkannya ke dalam elemen, seperti:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Anda mempunyai sedikit kawalan sekiranya anda menggunakan insertAdjacentHTMLfungsi tersebut kerana anda boleh meletakkan HTML baru di empat tempat yang berbeza:
text inside node Anda menggunakannya seperti ...
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Terdapat keadaan di mana anda mungkin mahu DOM yang baru dibuat masih dalam JavaScript sebelum anda melakukan sesuatu dengannya. Sekiranya demikian, anda boleh menguraikan rentetan anda terlebih dahulu, seperti:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Itu akan memberi anda DOM yang lengkap, jadi anda perlu mengeluarkan anak yang anda tambahkan. Dengan anggapan ia hanya mempunyai satu elemen induk, seperti…
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Sekarang anda boleh memperbaikinya new_elementmengikut keperluan, saya rasa sebelum melakukan apa yang perlu anda lakukan dengannya.
Agak mudah untuk melakukan ini:
let new_element = document.createRange() .createContextualFragment(string_of_html);Anda akan mendapat elemen secara langsung sebagai serpihan dokumen untuk dilampirkan atau apa sahaja yang diperlukan. Kaedah ini terkenal kerana ia akan benar-benar melaksanakannya di dalamnya, yang boleh berguna dan berbahaya.
Terdapat banyak nuansa untuk semua ini. Contohnya, HTML perlu sah. HTML yang tidak betul tidak akan berfungsi. Cacat mungkin juga membuat anda terkejut, seperti memasukkan ke dalam
Koen Schaft menulis "Buat simpul DOM dari rentetan HTML" yang merangkumi apa yang kita ada di sini tetapi lebih terperinci dan dengan lebih banyak gotchas.
akan gagal kerana hilang a. #####