Katakanlah Anda memiliki beberapa HTML yang berupa string:
let string_of_html = ` Cool `;Mungkin berasal dari API atau Anda telah membuatnya sendiri dari template literal atau semacamnya.
Anda dapat menggunakannya innerHTMLuntuk memasukkannya ke dalam elemen, seperti:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Anda memiliki sedikit lebih banyak kontrol jika Anda menggunakan insertAdjacentHTMLfungsi karena Anda dapat menempatkan HTML baru di empat tempat berbeda:
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);Ada keadaan di mana Anda mungkin ingin DOM yang baru dibuat masih dalam JavaScript sebelum Anda melakukan apa pun dengannya. Dalam hal ini, Anda dapat mengurai string Anda terlebih dahulu, seperti:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Itu akan memberi Anda DOM lengkap, jadi Anda harus menarik keluar anak yang Anda tambahkan. Dengan asumsi itu hanya memiliki satu elemen induk, itu seperti…
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Sekarang Anda dapat mengotak-atiknya new_elementsesuai kebutuhan, saya kira sebelum melakukan apa yang perlu Anda lakukan dengannya.
Ini sedikit lebih mudah untuk melakukan ini:
let new_element = document.createRange() .createContextualFragment(string_of_html);Anda akan mendapatkan elemen secara langsung sebagai fragmen dokumen untuk ditambahkan atau apa pun yang diperlukan. Metode ini terkenal karena akan benar-benar mengeksekusi yang ditemukan di dalamnya, yang dapat berguna dan berbahaya.
Ada banyak nuansa dalam semua ini. Misalnya, HTML harus valid. HTML yang rusak tidak akan berfungsi. Format yang salah juga dapat membuat Anda terkejut, seperti memasukkan a ke
Koen Schaft menulis "Buat simpul DOM dari string HTML" yang mencakup apa yang kita miliki di sini tetapi lebih terinci dan dengan lebih banyak gotcha.
akan gagal karena tidak memiliki. #####