Sifat innerHTML Elemen DOM HTML

Definisi dan penggunaan

innerHTML Set atau dapatkan kandungan HTML elemen (HTML dalaman).

Lihat juga:

Sifat innerText

Sifat textContent

contoh

contoh 1

Dapatkan kandungan HTML elemen dengan id="myP":

let html = document.getElementById("myP").innerHTML;

Coba sendiri

contoh 2

Ubah kandungan HTML elemen dengan id="demo":

document.getElementById("demo").innerHTML = "I have changed!";

Coba sendiri

contoh 3

Dapatkan kandungan HTML elemen <ul> dengan id="myList":

let html = document.getElementById("myList").innerHTML;

Coba sendiri

contoh 4

Hapus kandungan HTML elemen <p> dengan id="demo":

element.innerHTML = "";

Coba sendiri

contoh 5

Ubah kandungan HTML dua elemen:

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

Coba sendiri

contoh 6

Ulangi konten HTML elemen

element.innerHTML += element.innerHTML;

Coba sendiri

Contoh 7

Ubah konten HTML dan URL tautan:

element.innerHTML = "W3School";
element.href = "";

Coba sendiri

Sintaks

Kembalikan properti innerHTML:

element.innerHTML

Atur properti innerHTML:

element.innerHTML = text

Nilai atribut

Nilai Deskripsi
String. Konten HTML

Nilai pengembalian

Tipe Deskripsi
String Konten HTML elemen

Perbedaan antara innerHTML, innerText dan textContent

Properti innerText mengembalikan:

Hanya mengembalikan konten teks elemen dan semua turunannya, tanpa spasi teks tersembunyi CSS dan tag, kecuali elemen <script> dan <style>.

Properti innerHTML mengembalikan:

Konten teks elemen, termasuk semua spasi dan tag HTML internal.

Properti textContent mengembalikan:

Konten teks elemen dan semua turunan, termasuk spasi dan teks tersembunyi CSS, tetapi tanpa tag.

Contoh HTML

<p id="myP">   Element ini memiliki spasi tambahan dan mengandung <span>elemen span</span>.</p>

Contoh JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Coba sendiri

Dalam contoh di atas:

Properti innerText mengembalikan:

Element ini memiliki spasi tambahan dan mengandung elemen span.

Properti innerHTML mengembalikan:

   Element ini memiliki spasi tambahan dan mengandung <span>elemen span</span>.

Properti textContent mengembalikan:

   Element ini memiliki spasi tambahan dan mengandung elemen span.

Pelayar web mendukung

Semua pelayar web mendukung element.innerHTML：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan Dukungan