Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Properti innerHTML dan outerHTML DOM memungkinkan Anda membaca dan menulis konten di halaman web. Anda dapat menggunakannya untuk mengambil markup atau mengubahnya, dan keduanya serupa dalam banyak hal. Tetapi ada perbedaan yang signifikan.

Saat bekerja dengan DOM, Anda akan menggunakan innerHTML dan outerHTML dengan sangat berbeda. Cari tahu cara menggunakan kedua properti ini dengan contoh praktis.

Apa Itu HTML Dalam?

Properti innerHTML adalah bagian dari DOM dan Anda dapat mengaksesnya melalui JavaScript. Anda dapat menggunakannya untuk mendapatkan atau mengatur konten elemen. Konten ini mengecualikan tag elemen itu sendiri dan hanya menyertakan markup yang mewakili turunan elemen, dalam bentuk string.

Pertimbangkan contoh kode ini:

<html>
<tubuh>
<Ppengenal="myP">Aku adalah sebuah paragraf.P>


<naskah>
dokumen.getElementById("myP").innerHTML = "Halo Dunia";
naskah>
tubuh>


html>
instagram viewer

Di browser Anda, Anda akan melihat paragraf standar dengan teks pengganti, seperti:

Properti innerHTML memilih dan mengubah isi darielemen dalam contoh ini.

Apa itu Outer HTML?

Properti outerHTML seperti innerHTML dalam banyak hal. Anda dapat menggunakannya untuk mendapatkan atau mengatur konten dari elemen yang dipilih. Namun, itu juga menetapkan markup yang mewakili elemen itu sendiri. Ini termasuk tag pembuka, properti apa pun, dan—jika relevan—tag penutup.

Kunjungi kembali contoh sebelumnya untuk melihat perbedaan outerHTML:

<html>
<tubuh>
<Ppengenal="myP">Aku adalah sebuah paragraf.P>


<naskah>
dokumen.getElementById("myP").outerHTML = "
H1 ini menggantikan sebuah paragraf.
"
naskah>
tubuh>
html>

Di browser Anda, Anda akan melihat sesuatu seperti ini:

Dalam contoh ini, properti outerHTML mengubah P elemen ke dalam sebuah h1 elemen.

Ketahui Perbedaannya dan Kapan Menggunakan Properti Ini

Properti DOM innerHTML dan outerHTML memiliki banyak kesamaan, tetapi satu perbedaan utama. Properti innerHTML menangkap konten HTML dari suatu elemen. Sebaliknya, properti outerHTML menangkap HTML yang mewakili elemen itu sendiri dan kontennya.

Anda dapat menggunakan properti ini untuk membaca dan menulis konten HTML melalui DOM. DOM akan menjadi konsep umum dan penting selama proses pengembangan JavaScript Anda.