Properti innerHTML Element HTML DOM

Definisi dan penggunaan

innerHTML Atur atau kembalikan konten HTML elemen (HTML internal).

Lihat pula:

Properti innerText

Properti textContent

Contoh

Contoh 1

Ambil konten HTML elemen dengan id="myP":

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

Coba sendiri

Contoh 2

Ubah konten HTML elemen dengan id="demo":

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

Coba sendiri

Contoh 3

Ambil konten HTML elemen <ul> dengan id="myList":

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

Coba sendiri

Contoh 4

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

element.innerHTML = "";

Coba sendiri

Contoh 5

Ubah konten 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 atribut innerHTML:

element.innerHTML

Atur atribut innerHTML:

element.innerHTML = text

Nilai atribut

Nilai Deskripsi
String. Isi HTML

Nilai kembalian

Tipe Deskripsi
String Isi HTML elemen

Perbedaan antara innerHTML, innerText, dan textContent

Atribut innerText mengembalikan:

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

Atribut innerHTML mengembalikan:

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

Atribut textContent mengembalikan:

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

Contoh HTML

<p id="myP">   This element has extra spacing     and contains <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:

Atribut innerText mengembalikan:

Elemen ini memiliki spasi ekstra dan mengandung elemen span.

Atribut innerHTML mengembalikan:

   Elemen ini memiliki spasi ekstra dan mengandung <span>elemen span</span>.

Atribut textContent mengembalikan:

   Elemen ini memiliki spasi ekstra dan mengandung elemen span.

Peramban mendukung

Seluruh peramban mendukung element.innerHTML：

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