Bagaimanakah Saya Boleh Mencipta Elemen DOM daripada Rentetan HTML Menggunakan Kaedah atau Prototaip Terbina dalam JavaScript?-tutorial js-php.cn

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

Linda Hamilton

Lepaskan： 2024-12-16 19:10:14

asal

656 orang telah melayarinya

How Can I Create DOM Elements from HTML Strings Using JavaScript's Built-in Methods or Prototype?

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);

Salin selepas log masuk

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);

Salin selepas log masuk

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;
}

Salin selepas log masuk

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

Kesimpulan

Oleh memanfaatkan kaedah atau Prototaip DOM terbina dalam, pembangun boleh mencipta elemen DOM daripada rentetan HTML walaupun tanpa bergantung pada rangka kerja. Pilihan pendekatan bergantung pada keperluan khusus projek dan persekitaran JavaScript.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Elemen DOM daripada Rentetan HTML Menggunakan Kaedah atau Prototaip Terbina dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!