InnerHTML In JavaScript

1.The innerHTML Syntax
Gunakan Kode HTML di bawah ini

document.getElementById('{ID of element}').innerHTML = '{content}'; 

2.Basic innerHTML Example
Berikut adalah contoh dasar untuk menunjukkan bagaimana innerHTML bekerja.

Kode ini mencakup dua fungsi dan dua tombol. Setiap fungsi menampilkan pesan yang berbeda dan setiap tombol memicu fungsi yang berbeda.

Dalam fungsi, getElementById mengacu pada elemen HTML dengan menggunakan ID. Aku memberikan elemen HTML ID dari "myText" menggunakan id = "myText".

Jadi fungsi pertama misalnya, kamu dapat melihat bahwa document.getElementById ('myText') 'Terima kasih! "InnerHTML =;. Adalah pengaturan innerHTML dari elemen" myText "untuk" Terima kasih! ".

Kode

<script type="text/javascript">
function Msg1(){
  document.getElementById('myText').innerHTML = 'Thanks!';
}
function Msg2(){
  document.getElementById('myText').innerHTML = 'Try message 1 again...';
}
</script>
<input type="button" onclick="Msg1()" value="Show Message 1" />
<input type="button"  onclick="Msg2()" value="Show Message 2" />
<p id="myText"></p> 

Contoh

Example 2: innerHTML With User Input

Berikut contoh penggunaan innerHTML dengan field teks. Di sini, Aku ( yeye ) menampilkan apa pun pengguna telah masuk ke dalam bidang masukan.

Kode

<script type="text/javascript">
function showMsg(){
  var userInput = document.getElementById('userInput').value;
  document.getElementById('userMsg').innerHTML = userInput;
}
</script>
<input type="input" maxlength="40" id="userInput" 
  onkeyup="showMsg()" value="Enter text here..." />
<p id="userMsg"></p> 

Jasil :

Example 3: Formatting with getElementById
Dalam contoh ini, aku menggunakan properti getElementById untuk mendeteksi warna yang telah dipilih pengguna. Kita kemudian dapat menggunakan style.color untuk menerapkan warna baru. Dalam kedua kasus, kita merujuk pada elemen HTML dengan ID mereka (menggunakan getElementById.)


Kode :

<script type="text/javascript">
function changeColor(){
  var newColor = document.getElementById('colorPicker').value;
	document.getElementById('colorMsg').style.color = newColor;
}
</script>
<p id="colorMsg">Choose a color...</p> 
<select id="colorPicker" onchange="JavaScript:changeColor()">
<option value="#000000">Black</option>
<option value="#000099">Blue</option>
<option value="#990000">Red</option>
<option value="#009900">Green</option>
</select>

Hasil :

Choose a color...

Black Blue Red Green

Cuma itu yg bisa aku share ke kalian semua ... selebihnya makasih banyak udah mau jadi teman ku ;shy