Apa yang harus kita gunakan daripada innerhtml?

Contoh

Dapatkan konten HTML dari suatu elemen dengan id="myP"

biarkan html = dokumen. getElementById("myP"). innerHTML;

Ubah konten HTML suatu elemen dengan id="demo"

dokumen. getElementById("demo"). innerHTML = "Saya telah berubah. ";

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 AntarainnerHTML, innerText dan textContent

Lihat di bawah

Sintaksis

Kembalikan properti innerHTML

Setel properti innerHTML

Nilai properti

Nilai Pengembalian

Lebih 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;

Contoh

Ubah konten HTML dan URL tautan

elemen. innerHTML = "W3Schools";
elemen. href = "https. // www. w3schools. com";

Perbedaan AntarainnerHTML, innerText dan textContent

CodeReturned Valuebrowser. DomElement("//div[@id='mylinks']"). GetProperty("textContents")

This is my link collection:

This is my link collection:Bye bye Borland Welcome to Micro Focus

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>';
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

Mengapa kita tidak menggunakan innerHTML?

Haruskah saya menggunakan innerHTML atau innerText?

Bagaimana saya bisa menambahkan HTML tanpa innerHTML?

Mengapa textContent lebih baik daripada innerHTML?