Mengapakah menggunakan `element.innerHTML = \'...\'` merupakan amalan yang tidak baik?

Bahaya Menambahkan dengan Element.innerHTML

Anda pernah mendengar bisikan yang menggabungkan elemen menggunakan element.innerHTML = "..." ialah pengekodan tidak-tidak. Tetapi apakah sebenarnya kemudaratannya?

Pertimbangkan coretan berikut:

var str = "<div>hello world</div>";
var elm = document.getElementById("targetID");

elm.innerHTML += str; // Not recommended?

Isunya terletak pada penghuraian dan pemaparan berulang HTML. Setiap kali innerHTML diberikan, penyemak imbas mesti menghuraikan HTML, membina DOM dan memasukkannya ke dalam dokumen. Proses ini memakan masa dan boleh menjadi sangat menyusahkan untuk struktur HTML yang kompleks.

Akibatnya, penggunaan innerHTML = untuk penambahan mudah elemen adalah tidak digalakkan. Sebaliknya, pilih kaedah appendChild:

var newElement = document.createElement('div');
newElement.innerHTML = '<div>Hello World!</div>';
elm.appendChild(newElement);

Dengan menggunakan appendChild, anda mengelakkan penghuraian semula yang tidak perlu dan mengekalkan integriti elemen DOM sedia ada.

Nota: Walaupun sesetengah penyemak imbas mungkin mengoptimumkan operator =, sebaiknya jangan bergantung pada tingkah laku ini untuk prestasi pengoptimuman.

Atas ialah kandungan terperinci Mengapakah menggunakan `element.innerHTML = \'...\'` merupakan amalan yang tidak baik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!