Contoh
Dapatkan konten HTML dari suatu elemen dengan id="myP"
biarkan html = dokumen. getElementById("myP"). innerHTML;
Cobalah sendiri "Ubah konten HTML suatu elemen dengan id="demo"
dokumen. getElementById("demo"). innerHTML = "Saya telah berubah. ";
Cobalah sendiri "Dapatkan konten HTML dari a
- elemen dengan id="myList"
biarkan html = dokumen. getElementById("daftarsaya"). innerHTML;
Cobalah sendiri "Hapus konten HTML a
elemen dengan id="demo"
Cobalah sendiri "Lebih banyak contoh di bawah ini
Definisi dan Penggunaan
Properti innerHTML_ menyetel atau mengembalikan konten HTML (HTML bagian dalam) dari suatu elemen
Perbedaan Antara
innerHTML, innerText dan textContent
Lihat di bawah
Sintaksis
Kembalikan properti innerHTML
Setel properti innerHTML
Nilai properti
Konten PropertyDescriptionStringHTMLNilai Pengembalian
TypeDescriptionStringKonten HTML elemenLebih Banyak Contoh
Contoh
Ubah konten HTML dari dua elemen
biarkan teks = "Halo Dolly. ";
dokumen. getElementById("myP"). innerHTML = teks;
dokumen. getElementById("myDIV"). innerHTML = teks;
Contoh
Ulangi konten HTML suatu elemen
elemen. innerHTML += elemen. innerHTML;
Cobalah sendiri "Contoh
Ubah konten HTML dan URL tautan
elemen. innerHTML = "W3Schools";
elemen. href = "https. // www. w3schools. com";
Perbedaan Antara
innerHTML, innerText dan textContent
Properti innerHTML kembaliKonten teks elemen, termasuk semua spasi dan tag HTML bagian dalam. Properti innerText kembali
Hanya konten teks elemen dan semua turunannya, tanpa spasi dan tag teks tersembunyi CSS, kecuali
CodeReturned Valuebrowser. DomElement("//div[@id='mylinks']"). GetProperty("textContents")This is my link collection:browser. DomElement("//div[@id='mylinks']"). GetProperty("innerText")This is my link collection:Bye bye Borland Welcome to Micro Focusbrowser. DomElement("//div[@id='mylinks']"). GetProperty("innerHtml")This is my <b>link collection</b>: <ul> <li><a href="www.borland.com">Bye bye <b>Borland</b></a></li> <li><a href="www.microfocus.com">Welcome to <b>Micro Focus</b></a></li> </ul>
Anda dapat memasukkan HTML ke dalam ini. Namun kelemahan dari metode ini adalah, ia memiliki serangan keamanan lintas situs. Jadi untuk menambahkan teks, lebih baik hindari ini untuk alasan keamanan
2- teks dalam
document.getElementById("ShowButton").innerText = 'Show Filter';Ini juga akan mencapai hasil tetapi berat di bawah kap karena memerlukan beberapa informasi sistem tata letak, yang menyebabkan kinerja menurun. Tidak seperti innerHTML, Anda tidak dapat menyisipkan tag HTML dengan ini. Cek Disini
3- konten teks
document.getElementById("ShowButton").textContent = 'Show Filter';_Ini juga akan mencapai hasil yang sama tetapi tidak memiliki masalah keamanan seperti innerHTML karena tidak mengurai HTML seperti innerText. Selain itu, juga ringan sehingga performanya meningkat
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 menambahkan 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>';
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)_4 untuk menyusun simpul DOM dan menambahkannya ke pohon DOMlet 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)4 dan menambahkan fragmen ke pohon DOM aktif satu kali di bagian akhirFragmen dokumen tidak tertaut ke pohon DOM yang aktif, oleh karena itu, tidak menghasilkan kinerja apa pun