Bagaimanakah Saya Boleh Menukar Rentetan HTML kepada Elemen DOM dalam JavaScript?

Membuat Elemen DOM daripada Rentetan HTML

Dalam JavaScript, terdapat keadaan apabila anda perlu menukar rentetan HTML kepada elemen DOM yang sepadan. Ini ialah operasi asas untuk mencipta dan memanipulasi kandungan halaman secara dinamik, seperti semasa menambahkan elemen pada dokumen.

Untuk menyelesaikan tugas ini, anda boleh menggunakan DOMParser. Sintaks untuk menggunakan DOMParser ialah:

const doc = new DOMParser().parseFromString(htmlString, "text/xml");

Di sini, htmlString mewakili kod HTML yang anda ingin tukar dan doc ialah dokumen terhasil yang mengandungi elemen DOM yang dihuraikan.

Sebagai contoh, pertimbangkan rentetan HTML berikut:

<div>
    <a href="#"></a>
    <span></span>
</div>

Menggunakan DOMParser, anda boleh menukar rentetan ini menjadi Elemen DOM seperti berikut:

const htmlString = "
";
const doc = new DOMParser().parseFromString(htmlString, "text/xml");

Objek dokumen kini memegang HTML yang dihuraikan sebagai elemen DOM, yang boleh ditambahkan pada halaman menggunakan kaedah seperti appendChild():

const parentElement = document.getElementById('parent');
parentElement.appendChild(doc.firstChild);

Ini akan menambah kandungan HTML yang dihuraikan sebagai elemen anak parentElement dalam DOM sebenar. Ambil perhatian bahawa DOMParser mentafsir HTML gaya XHTML, yang memerlukan teg penutup, seperti dalam contoh di atas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Rentetan HTML kepada Elemen DOM dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!