Apa kerugian menggunakan innerhtml?

Apa kerugian menggunakan innerHTML dalam JavaScript?

► Jika Anda menggunakan innerHTML, konten diganti setiap saat
► Kami tidak dapat menggunakan seperti 'menambahkan ke innerHTML'
► Kalaupun kita menggunakan += seperti "innerHTML = innerHTML + 'html'" maka juga konten lama diganti dengan html
► Jika kita menggunakan innerHTML maka seluruh konten innerHTML diurai ulang dan dibangun menjadi elemen. Oleh karena itu jauh lebih lambat
► InnerHTML tidak memberikan validasi dan oleh karena itu kami berpotensi memasukkan HTML yang tidak valid dan rusak ke dalam dokumen dan merusaknya
Disampaikan oleh

Pertanyaan JavaScript Pengembang Pakar Teratas

Kategori Skrip Sisi Klien Teratas

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, garis dengan innerHTML += menyebabkan masalah besar. Sebagai programmer 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 isi 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

Saya seorang penulis profesional dan pengembang perangkat lunak dengan pengalaman lebih dari 10 tahun. Saya telah bekerja untuk banyak bisnis dan dapat berbagi contoh karya dengan Anda berdasarkan permintaan. Chat saya dan mari kita mulai

Properti innerHTML sangat populer karena menyediakan cara sederhana untuk mengganti konten elemen HTML sepenuhnya. Cara lain untuk melakukannya adalah dengan menggunakan DOM Level 2 API (removeChild, createElement, appendChild) tetapi menggunakan innerHTML sejauh ini merupakan cara termudah dan paling efisien untuk memodifikasi pohon DOM. Namun, innerHTML memiliki beberapa masalah sendiri yang perlu Anda waspadai

1. Konten diganti di mana-mana. Saat Anda menambahkan (atau memodifikasi) innerHTML, semua node DOM di dalam elemen tersebut harus diurai ulang dan dibuat ulang
2. Mempertahankan penangan acara yang melekat pada elemen DOM apa pun. Menyetel innerHTML tidak akan secara otomatis memasang kembali penangan peristiwa ke elemen baru yang dibuatnya, jadi Anda harus melacaknya sendiri dan menambahkannya secara manual, berpotensi membuat kebocoran memori di beberapa browser
3. Bahkan jika Anda menggunakan +=like "innerHTML = innerHTML + 'html'" tetap saja konten lama diganti dengan html. Penggabungan string tidak dapat diskalakan ketika elemen DOM dinamis perlu dibuat karena pembukaan dan penutupan tanda plus dan kutipan menjadi sulit untuk dilacak

Mengapa Anda harus menghindari innerHTML?

Apa kerugian menggunakan HTML dalam JavaScript?