Pada kesempatan kali ini saya akan menjelaskan perbedaan innerText dan innerHTML di javascript. Perlu teman-teman ketahui sebelumnya innerText dan innerHTML adalah salah satu property dari JavaScript dimana fungsi dari keduanya sama-sama untuk menentukan dan mengembalikan nilai konten dari suatu element, namun dari keduanya terdapat perbedaan yang cukup signifikan. Jika pada property innerText fungsinya adalah untuk menentukan dan mengembalikan nilai konten dari suatu element dalam bentuk text atau string sedangkan untuk innerHTML fungsinya adalah untuk menentukan dan mengembalikan nilai konten dari suatu element dalam bentuk text atau string berikut dengan tag html didalamnya nya.

Sebagai contoh saya memiliki struktur html list seperti berikut :

Dari struktur html tersebut saya hanya ingin mengambil konten atau text nya saja yang ada didalam tag html <li> , maka untuk penggunaan dari kedua property tersebut lebih tepatnya adalah dengan menggunakan property innerText. Untuk membuktikannya, kalian bisa ikuti tahapan saya dibawah ini.

Berikut Tahapannya :

  • Teman-teman buat terlebih dahulu satu buah file dengan nama index-text.html, ketikan kode seperti berikut :

  • Jika sudah save file tersebut. Dan lihat hasilnya di browser.
  • Selanjutnya Teman-teman buat lagi satu buah file dengan nama index-html.html, ketikan kode seperti berikut :

  • Jika sudah save file tersebut. Dan lihat hasilnya di browser.

Dari hasil kedua file tersebut terlihat jelas, jika menggunakan innerText meskipun didalam list tersebut terdapat tag-tag html maka akan diabaikan dan ditampilkan dalam format text biasa sedangkan jika menggunakan innerHTML akan menerjemahkan tag-tag yang ada didalam list tersebut dalam bentuk outuput html.

Sampai disini penjelasna saya mengenai perbedaan innerText dan innerHTML di javascript, semoga bermanfaat.