Mengapa Elakkan `document.write()` dan Apakah Alternatif Terbaik?

Alternatif untuk document.write() dan Mengapa Perlu Mengelakkannya

Walaupun biasa ditemui dalam tutorial, penggunaan document.write( ) secara meluas tidak digalakkan kerana sifatnya yang merosakkan dan ketidakpatuhan dengan HTML standard.

Sebab untuk Mengelakkan document.write():

• Penggantian Dokumen: document.write() menggantikan keseluruhan dokumen , termasuk sebarang kandungan sedia ada. Ini boleh menjadi malapetaka jika digunakan selepas halaman dimuatkan.
• XHTML tidak sah: Dalam XHTML, document.write() ialah kod tidak sah kerana mengabaikan struktur dokumen.
• Isu Prestasi: document.write() memperlahankan penyemak imbas dengan memaksanya untuk reparse dan render keseluruhan dokumen.

Alternatif untuk document.write():

Nasib baik, terdapat alternatif untuk document.write() yang kedua-duanya berkesan dan mematuhi piawaian:

• innerHTML Harta: Sifat ini membenarkan anda mengubah suai kandungan elemen HTML tanpa menggantikan keseluruhan dokumen. Contoh: element.innerHTML = "Kandungan Baharu";
• createElement() Kaedah: Mencipta elemen HTML baharu dan menambahkannya pada dokumen. Contoh: document.createElement("p").innerHTML = "Perenggan Baharu";
• createTextNode() Kaedah: Mencipta nod teks dan menambahkannya pada elemen HTML. Contoh: element.appendChild(document.createTextNode("Teks Baharu"));

Contoh:

Pertimbangkan HTML berikut:

<p>This is an innocent HTML page.</p>

Menggunakan innerHTML untuk menukar secara dinamik kandungan:

<script>
  document.querySelector("p").innerHTML = "This page is now modified.";
</script>

Ini akan mengubah suai kandungan perenggan tanpa menjejaskan dokumen sekeliling. Pendekatan ini lebih selamat dan lebih cekap daripada menggunakan document.write().

Atas ialah kandungan terperinci Mengapa Elakkan `document.write()` dan Apakah Alternatif Terbaik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!