Bagaimana untuk Menambahkan Kandungan HTML pada DOM Dengan Selamat dan Cekap?-tutorial js-php.cn

Bagaimana untuk Menambahkan Kandungan HTML pada DOM Dengan Selamat dan Cekap?

Susan Sarandon

Lepaskan： 2024-11-05 07:54:02

asal

446 orang telah melayarinya

How to Append HTML Content to the DOM Safely and Efficiently?

Menambahkan Kandungan HTML pada DOM

Dalam bidang pembangunan web, memanipulasi Model Objek Dokumen (DOM) untuk mengubah suai tapak web yang dipaparkan kandungan sering diperlukan. Satu tugas biasa ialah menambahkan rentetan HTML pada elemen tertentu pada halaman. Walaupun terdapat beberapa pendekatan untuk mencapai matlamat ini, adalah penting untuk mematuhi amalan terbaik dan menggunakan teknik yang disokong secara meluas merentas penyemak imbas moden.

Satu kaedah yang telah digantikan ialah menetapkan keseluruhan kandungan HTML elemen menggunakan div.innerHTML = str. Pendekatan ini boleh terdedah kepada ralat dan mengatasi kandungan sedia ada secara tidak sengaja.

Penyelesaian yang lebih dipercayai ialah memanfaatkan kaedah insertAdjacentHTML, disokong oleh semua penyemak imbas utama. Kaedah ini membolehkan pembangun memasukkan kandungan HTML ke dalam kedudukan tertentu berbanding dengan elemen sedia ada.

Untuk menambahkan kandungan HTML pada

elemen dengan id "ujian", berikut ialah sintaks yang betul:

<code class="javascript">div.insertAdjacentHTML('beforeend', str);</code>

Salin selepas log masuk

Parameter kedudukan 'sebelum akhir' memastikan str kandungan HTML ditambahkan dalam

elemen, selepas elemen anak terakhirnya.

Berikut ialah demo langsung: http://jsfiddle.net/euQ5n/

Dengan menggunakan insertAdjacentHTML, pembangun boleh mengubah suai DOM dengan cekap dan mengekalkan integriti kandungan sedia ada.

Atas ialah kandungan terperinci Bagaimana untuk Menambahkan Kandungan HTML pada DOM Dengan Selamat dan Cekap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Menukar Parameter URL kepada Objek JavaScript dengan Cekap? Artikel seterusnya：Bagaimana Mengendalikan Parameter Pilihan dalam JavaScript dengan Amanah?

Kenyataan Laman Web ini

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 terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2238

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2378

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1988

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...