Cara menggunakan innertext vs innerhtml

Pada tutorial kali ini Anda akan belajar bagaimana Cara Memasukan String ke Dalam Element HTML dengan InnerHTML pada Javascript.

Table of Contents

• Definition and Usage
• The Differences Between innerHTML, innerText and textContent
• Property Value
• Return Value
• More Examples
• The Differences Between innerHTML, innerText and textContent
• HTML Example
• JavaScript Examples
• Browser Support
• Inner HTML untuk apa?
• Apa fungsi console?
• Manakah penjelasan yang benar mengenai perbedaan antara innerText dan innerHTML?
• Bagaimana membuat komentar di javascript?

Untuk memanipulasi HTML tidak cukup dengan HTML dan CSS saja, kadang ada beberapa maslah yang tidak bisa di selesaikan oleh HTML dan CSS. Maka dari itulah dibutuhkan lagi sebuah javascript untuk memanipulasinya.

Pada javascript untuk memasukan sebuah string  ke dalam suatu element membutuhkan fungsi InnerHTML. Contohnya kasusnya sebagai berikut :

Saya memiliki HTML seperti ini :

	<input type="text" id="nama">
	<input type="submit" value="cetak" onclick="cetak()">
	<br>

 <h2><strong id="str"></strong></h2>

Jika saya click tombol cetak maka element <h2><strong> </strong></h2> akan berisikan string apapun yang saya inputkan pada text box . Maka javascriptnya adalah sebagai berikut :

<script type="text/javascript">
	function cetak(){
		var name = document.getElementById('nama').value;
		document.getElementById('str').innerHTML ="nama anda adalah : "+ name;
	}
	</script>

Jika dijalankan hasilnya akan seperti ini :

Jadi, apapun yang kalian inputkan di dalam text box maka akan di tampilkan di dalam tag <h2><strong> </strong></h2>.

Oke itu saja dari saya, semoga bermanfaat. sampai bertemu pada artikel selanjutnya.