Rumah > Artikel > hujung hadapan web > Bagaimana untuk Menyuntik HTML ke dalam DOM Anda dengan Selamat dan Cekap?

Bagaimana untuk Menyuntik HTML ke dalam DOM Anda dengan Selamat dan Cekap?

Barbara Streisandasal: 2024-11-04 13:11:01444semak imbas

How to Inject HTML into Your DOM Safely and Efficiently?

Menyuntik HTML ke dalam DOM Anda: Panduan Komprehensif

Melampirkan rentetan HTML pada DOM anda ialah tugas biasa dalam pembangunan web. Dalam artikel ini, kami akan meneroka kaedah yang berkesan untuk mencapai ini tanpa menggunakan sifat innerHTML yang dilarang.

Melepaskan Kuasa insertAdjacentHTML()

Untuk menambahkan HTML pada dokumen anda secara dinamik, pertimbangkan untuk memanfaatkan kaedah insertAdjacentHTML(). Ciri ini disokong secara universal oleh penyemak imbas moden dan menawarkan cara yang selamat dan cekap untuk memanipulasi DOM.

Sintaks dan Penggunaan

Kaedah insertAdjacentHTML() mengambil dua parameter:

kedudukan: Kedudukan di mana anda ingin memasukkan HTML. Nilai yang sah termasuk:
- sebelum bermula: Sebelum permulaan elemen
- afterbegin: Di dalam elemen, sebelum anak pertamanya
- sebelum: Di dalam elemen, selepas anak terakhirnya
- afterend: Selepas tamat elemen
html: Rentetan HTML yang anda mahu masukkan

Contoh Praktikal

Bayangkan anda mempunyai

elemen dengan id ujian. Untuk menambahkan rentetan HTML kami pada elemen ini, kami akan menggunakan kod berikut:

let str = '<p>Just some <span>text</span> here</p>';
const div = document.getElementById('test');
div.insertAdjacentHTML('beforeend', str);

Ini akan memasukkan HTML di dalam

elemen, selepas anak terakhirnya.

Demonstrasi Langsung

Untuk demonstrasi visual, sila lawati JSFiddle berikut: http://jsfiddle.net/euQ5n/

Kesimpulan

Menggunakan insertAdjacentHTML() menyediakan penyelesaian yang mantap dan serasi silang untuk memanipulasi DOM. Terima kuasanya untuk menyuntik rentetan HTML ke halaman web anda dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk Menyuntik HTML ke dalam DOM Anda dengan Selamat dan Cekap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html String for include Property append dom this innerHTML position http

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Melaksanakan Panggilan Balik Selesai untuk Asynchronous forEach Gelung?Artikel seterusnya：Bagaimana untuk Melaksanakan Panggilan Balik Selesai untuk Asynchronous forEach Gelung?

Artikel berkaitan

Lihat lagi