Mengapa Elakkan `document.write()` dan Apakah Alternatif yang Lebih Baik?

Alternatif untuk document.write: Kenapa Elakkan dan Perkara yang Perlu Digunakan

Elakkan document.write

Dalam HTML tutorial, document.write() biasanya diperkenalkan, tetapi penggunaannya sering tidak digalakkan. Ini kerana document.write mempunyai had yang teruk:

• Menimpa keseluruhan dokumen: Apabila digunakan selepas halaman dimuatkan, document.write() akan mengosongkan keseluruhan HTML sedia ada dan menggantikan ia dengan kandungan yang disediakan.
• XHTML tidak sah: document.write() tidak sah secara ketat Kod XHTML.
• Isu prestasi: document.write() boleh memberi kesan negatif terhadap prestasi penyemak imbas, terutamanya apabila digunakan berulang kali.

Alternatif untuk mendokumenkan. tulis

Berikut ialah beberapa alternatif untuk mendokumentasikan.tulis yang lebih sesuai dalam kebanyakan situasi:

createElement() dan appendChild()

Pendekatan ini melibatkan mencipta elemen HTML baharu menggunakan createElement() dan menambahkannya pada DOM menggunakan appendChild(). Ia membolehkan anda memasukkan kandungan tanpa menimpa halaman sedia ada.

innerHTML

innerHTML ialah sifat yang boleh digunakan untuk menetapkan kandungan dalam elemen sedia ada. Kaedah ini sesuai untuk mengemas kini bahagian tertentu halaman tanpa menjejaskan kandungan yang lain.

insertAdjacentHTML()

Kaedah ini membolehkan anda memasukkan kod HTML berbanding dengan elemen tertentu. Ia menyediakan pelbagai pilihan untuk memasukkan sebelum, selepas, atau dalam elemen.

Contoh

Untuk menggambarkan penggunaan createElement() dan appendChild(), pertimbangkan perkara berikut kod:

const container = document.getElementById('container');
const newElement = document.createElement('p');
newElement.textContent = 'Hello, world!';
container.appendChild(newElement);

Kod ini mencipta

elemen dengan teks "Hello, dunia!" dan menambahkannya pada elemen bekas tanpa menimpa kandungan sedia ada.

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