Bagaimana untuk Menambah HTML pada DOM Tanpa Menggunakan `div.innerHTML`?

Menambah HTML pada DOM tanpa Menggunakan div.innerHTML

Apabila cuba menambahkan rentetan HTML pada DOM, pendekatan tipikal div.innerHTML = str mungkin kelihatan mudah, tetapi ia sering tidak digalakkan kerana kemungkinan implikasi keselamatan. Soalan ini meneroka penyelesaian alternatif untuk menambahkan rentetan HTML pada elemen tertentu.

Dalam senario ini, tugasnya ialah untuk menambahkan rentetan HTML

Hanya beberapa teks di sini

ke

elemen dengan ujian ID. Untuk mencapai matlamat ini, pendekatan pilihan ialah memanfaatkan kaedah insertAdjacentHTML yang disokong oleh semua penyemak imbas moden.

Begini caranya:

div.insertAdjacentHTML('beforeend', str);

Kaedah insertAdjacentHTML mengambil dua parameter:

• kedudukan: Menunjukkan tempat untuk memasukkan kandungan HTML dalam elemen sasaran. Dalam kes ini, beforeend menambah kandungan di dalam elemen, selepas anak terakhirnya.
• HTMLString: Rentetan HTML untuk disisipkan.

Menggunakan div.insertAdjacentHTML('beforeend', str) memastikan bahawa rentetan HTML dilampirkan di dalam

elemen, mengekalkan struktur DOM sambil mengelakkan kemungkinan kebimbangan keselamatan yang berkaitan dengan penggunaan innerHTML.

Demonstrasi langsung penyelesaian ini boleh didapati di sini: http://jsfiddle.net/euQ5n/

Atas ialah kandungan terperinci Bagaimana untuk Menambah HTML pada DOM Tanpa Menggunakan `div.innerHTML`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html String for while using 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：Saya cuba beralih kepada Vue.js daripada React.jsArtikel seterusnya：Saya cuba beralih kepada Vue.js daripada React.js

Artikel berkaitan

Lihat lagi

• Analisis mendalam bagi komponen kumpulan senarai Bootstrap
• Penjelasan terperinci tentang fungsi JavaScript kari
• Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
• Angularjs menyepadukan UI WeChat (weui)
• Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional