Bagaimanakah Saya Boleh Menambah Rentetan HTML Mentah dengan Selamat pada DOM dalam JavaScript?

Menukar Rentetan HTML Mentah kepada Elemen DOM untuk Dilampirkan

JavaScript menyediakan pelbagai cara untuk memanipulasi kandungan HTML, termasuk mengubah suai sifat innerHTML atau innerText bagi elemen DOM. Walau bagaimanapun, kadangkala adalah perlu untuk menukar rentetan HTML mentah kepada elemen DOM untuk digunakan dengan kaedah seperti appendChild().

Menggunakan DOMParser

Antara muka DOMParser membenarkan penghuraian Rentetan XML dan HTML ke dalam elemen DOM. Untuk menukar rentetan HTML mentah kepada elemen DOM menggunakan DOMParser:

var xmlString = "<div><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");

Kaedah parseFromString() menghuraikan rentetan HTML dan mengembalikan objek Dokumen yang mengandungi struktur DOM yang dihuraikan.

Mengakses Elemen DOM

Untuk mengakses elemen DOM individu dalam yang dihuraikan dokumen:

console.log(doc.firstChild.innerHTML); // Outputs: <a href='#'>Link...</a>
console.log(doc.firstChild.firstChild.innerHTML); // Outputs: Link

Penggunaan

Elemen DOM yang dihuraikan kini boleh dihantar ke appendChild() atau digunakan untuk tugas manipulasi DOM yang lain, seperti:

var parentElement = document.getElementById("container");
parentElement.appendChild(doc.firstChild);

Ini akan menambahkan rentetan HTML yang dihuraikan secara berkesan sebagai elemen DOM pada #container elemen.

Nota: Adalah penting untuk menggunakan appendChild() dengan elemen DOM yang dihuraikan yang diperoleh melalui DOMParser, dan bukannya menambahkan terus rentetan HTML mentah, kerana yang terakhir boleh mengakibatkan kelemahan keselamatan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Rentetan HTML Mentah dengan Selamat pada DOM dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!