Bagaimanakah Saya Boleh Mencipta Elemen DOM daripada Rentetan HTML Menggunakan Kaedah atau Prototaip Terbina dalam JavaScript?

Mencipta Elemen DOM daripada Rentetan HTML: Meneroka Kaedah dan Prototaip Terbina Dalam

Apabila berhadapan dengan cabaran menukar rentetan HTML kepada elemen DOM , pembangun sering beralih kepada rangka kerja JavaScript seperti jQuery. Walau bagaimanapun, ia tidak selalu boleh dilaksanakan untuk menggabungkan rangka kerja ke dalam projek. Dalam senario ini, mengetahui cara untuk menyelesaikan tugas ini menggunakan kaedah DOM terbina dalam atau Prototaip menjadi penting.

Kaedah DOM

Kaedah document.createElement() ialah kaedah kaedah asas untuk mencipta elemen DOM baharu dalam JavaScript. Dengan memberikan nama tag elemen, anda boleh menjana elemen dan menambahkannya pada nod sedia ada. Contohnya:

var li = document.createElement('li');
li.innerHTML = 'text';
var ul = document.querySelector('ul');
ul.appendChild(li);

Prototaip

Kaedah kemas kini () prototaip menawarkan cara yang mudah untuk mencipta dan mengemas kini elemen DOM daripada rentetan HTML. Ia menghuraikan rentetan HTML dan memasukkan elemen yang terhasil ke dalam nod yang ditentukan.

var li = document.createElement('li');
li.update('<li>text</li>');
var ul = document.querySelector('ul');
ul.appendChild(li);

Pendekatan Alternatif

Untuk penyemak imbas dan persekitaran lama yang tidak menyokong kaedah moden , pendekatan sandaran melibatkan mencipta elemen bekas sementara dan memanipulasi innerHTMLnya.

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();
  return div.firstChild;
}

Ini kaedah ialah penyelesaian yang boleh dipercayai untuk pelaksanaan HTML dalaman buggy IE, tetapi ia tidak menyokong elemen tertentu yang tidak boleh menjadi anak kepada