Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menambah HTML pada DOM Tanpa Menggunakan `div.innerHTML`?

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

Linda Hamilton
Lepaskan: 2024-11-05 02:29:02
asal
389 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

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);
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
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan