Apa yang harus digunakan sebagai ganti innerhtml

Saat saya sedang menulis beberapa JS dasar untuk melakukan manipulasi DOM dan mendengarkan acara, saya menemukan bug yang membuat saya bingung. Saya menghabiskan waktu mempelajari Stack Overflow, mencari solusi tanpa hasil. Untuk mereplikasi bug, saya akan menyajikan versi sederhana dari kode saya

Untuk memulai, saya memiliki file HTML sederhana dengan satu div di badan

Dalam file JavaScript, saya menambahkan beberapa node ke DOM dan membuat event listener pada sebuah tombol

Di browser, halaman saya muncul seperti yang diharapkan. Ada gambar, diikuti dengan tombol dan beberapa teks tambahan yang saya tambahkan ke DOM

Dari sekilas kode, tombol memiliki tujuan yang jelas. Saat diklik, string hello harus dikeluarkan ke konsol. Namun, saat mengklik tombol, tidak ada yang dicetak. Mengapa?

Pertama, mari kita coba dan temukan di mana bug dimasukkan ke dalam kode. Untuk memulai, saya akan mengomentari baris div.innerHTML +=

Sekarang, ketika saya mengklik tombolnya, semuanya berfungsi seperti yang diharapkan. Setelah mengklik tombol, hello_ masuk ke konsol

Jelas, baris dengan innerHTML += menyebabkan masalah besar. Sebagai pemrogram JS, menggunakan operator seperti ++ dan += tampaknya wajar. Namun, menggunakan operator +=_ dengan innerHTML akan menyebabkan masalah besar. Di bawah ini kami akan membahas alasannya

Menambahkan ke div0 Mengurai Ulang Seluruh Tag

Saat Anda menggunakan operator append dengan innerHTML, Javascript akan mem-parse ulang konten seluruh tag dan membuat ulang semua elemen HTML

div0 Sangat Lambat

Sebagai efek samping alami dari alasan sebelumnya, reparsing membuat innerHTML menjadi sangat lambat. Untuk dokumen HTML kecil dengan teks statis, ini mungkin bukan masalah. Namun, dengan dokumen yang lebih besar, proses penguraian ulang sangat memakan waktu dan dapat menimbulkan efek samping yang tidak diinginkan

'innerHTML’ Menghapus Pendengar Acara

Kesimpulan yang paling jelas dari percobaan singkat kami adalah innerHTML menghapus event listener yang sebelumnya telah ditambahkan ke DOM. Karena seluruh tag (div_ dalam kode kita) sedang diurai, pendengar acara hilang dalam proses. Daripada menggunakan operator +=, gunakan fungsi DOM seperti div8

'innerHTML’ Menghadirkan Risiko Keamanan

Penggunaan innerHTML menciptakan potensi risiko keamanan untuk situs web Anda. Pengguna jahat dapat menggunakan skrip lintas situs (XSS) untuk menambahkan skrip sisi klien jahat yang mencuri informasi pribadi pengguna yang disimpan dalam cookie sesi

Anda dapat membaca di innerHTML

Metode yang Sesuai dengan W3C Dapat Menambahkan Elemen DOM Baru dengan Mudah

Metode seperti hello2, hello3, div8, dan hello5 memungkinkan manipulasi DOM yang aman tanpa konsekuensi yang tidak diinginkan dari innerHTML (dan hello7, lebih khusus lagi). Kecuali jika Anda hanya mengatur teks di dalam tag HTML, seperti hello8 atau hello9, jauhi innerHTML

Untuk pemula, innerHTML sepertinya cara termudah dan paling elegan untuk memanipulasi elemen dasar pada DOM. Namun, saat JS Anda semakin terlibat dan ukuran DOM Anda bertambah, innerHTML akan mengganggu kinerja dan menimbulkan risiko keamanan

Ringkasan. dalam tutorial ini, Anda akan mempelajari perbedaan antara innerHTML dan createElement() saat membuat elemen baru di pohon DOM

#1) createElement lebih berkinerja

Misalkan Anda memiliki elemen div_ dengan wadah kelas

<div class="container"></div>
Code language: HTML, XML (xml)

Anda dapat membuat elemen baru ke elemen div_ dengan membuat elemen dan menambahkannya

let div = document.querySelector('.container');

let p = document.createElement('p');
p.textContent = 'JS DOM';
div.appendChild(p);
Code language: JavaScript (javascript)

Anda juga dapat memanipulasi HTML elemen secara langsung menggunakan innerHTML seperti ini

let div = document.querySelector('.container');
div.innerHTML += '<p>JS DOM</p>';
Code language: JavaScript (javascript)

Menggunakan innerHTML lebih bersih dan lebih pendek saat Anda ingin menambahkan atribut ke elemen

let div = document.querySelector('.container');
div.innerHTML += '<p class="note">JS DOM</p>';
Code language: JavaScript (javascript)

Namun, menggunakan innerHTML_ menyebabkan browser web mengurai ulang dan membuat ulang semua node DOM di dalam elemen div. Oleh karena itu, ini kurang efisien daripada membuat elemen baru dan menambahkan div. Dengan kata lain, membuat elemen baru dan menambahkannya ke pohon DOM memberikan kinerja yang lebih baik daripada innerHTML

#2) createElement lebih aman

Seperti yang disebutkan dalam tutorial innerHTML, Anda harus menggunakannya hanya jika data berasal dari sumber tepercaya seperti database

Jika Anda menyetel konten yang tidak dapat Anda kendalikan ke innerHTML, kode berbahaya dapat diinjeksi dan dieksekusi

#3) Menggunakan DocumentFragment untuk menyusun Node DOM

Dengan asumsi Anda memiliki daftar elemen dan Anda perlukan di setiap iterasi

let div = document.querySelector('.container');

for (let i = 0; i < 1000; i++) {
   let p = document.createElement('p');
   p.textContent = `Paragraph ${i}`;
   div.appendChild(p);
}
Code language: JavaScript (javascript)

Kode ini menghasilkan perhitungan ulang gaya, lukisan, dan tata letak setiap iterasi. Ini sangat tidak efisien

Untuk mengatasinya, Anda biasanya menggunakan

let div = document.querySelector('.container');

let p = document.createElement('p');
p.textContent = 'JS DOM';
div.appendChild(p);
Code language: JavaScript (javascript)

let div = document.querySelector('.container');

// compose DOM nodes
let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
   let p = document.createElement('p');
   p.textContent = `Paragraph ${i}`;
   fragment.appendChild(p);
}

// append the fragment to the DOM tree
div.appendChild(fragment);
Code language: JavaScript (javascript)

Dalam contoh ini, kami menyusun simpul DOM dengan menggunakan objek

let div = document.querySelector('.container');

let p = document.createElement('p');
p.textContent = 'JS DOM';
div.appendChild(p);
Code language: JavaScript (javascript)

Fragmen dokumen tidak tertaut ke pohon DOM yang aktif, oleh karena itu, tidak menghasilkan kinerja apa pun

Apa alternatif yang lebih baik untuk innerHTML?

Mengapa Anda tidak harus menggunakan innerHTML?

Bagaimana saya bisa menambahkan HTML tanpa innerHTML?

Haruskah saya menggunakan innerHTML atau innerText?