Bagaimana untuk Menambah HTML pada DOM Tanpa Menggunakan `div.innerHTML`?-tutorial js-php.cn

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

Linda Hamilton

Lepaskan： 2024-11-05 02:29:02

asal

413 orang telah melayarinya

How to Append HTML to the DOM Without Using `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

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

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Saya cuba beralih kepada Vue.js daripada React.js Artikel seterusnya：Kaedah Mana Yang Terbaik untuk Memaparkan HTML kepada Imej?

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

2257

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

2392

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

2005

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