innerHTML Property Javascript

innerHTML property berguna untuk mengganti text maupun style yang ada pada element HTML.

Mengganti text dengan innerHTML

Setiap element HTML pasti memiliki innerHTML property. Berbeda dengan value property yang merupakan nilai dari element HTML, innerHTML adalah semua yang ada dalam element HTML mulai dari tag pembuka sampai tag penutup. innerHTML bisa berupa code bisa juga berupa text yang ada dalam element HTML.

Sebagai contoh awal, kita akan mengganti text yang ada dalam element bold.

Code JavaScript 1:

<script type="text/javascript">
function changeText(){
   document.getElementById('boldStuff').innerHTML = 'Khair Ranggi';
}
</script>
<p>Hai <b id='boldStuff'>kamu</b>! Selamat datang di blog aku.</p>
<input type='button' onclick='changeText()' value='Change Text'/>

Hasil code JavaScript 1:

Hai kamu! Selamat datang di blog aku.

document.getElementById('boldStuff').innerHTML = 'Khair Ranggi';

Code ini memiliki arti nyatakan [innerHTML] dari element dengan id [boldStuff] dan ganti menjadi text [Khair Ranggi].

Sekarang kamu tahu caranya mengganti text yang ada dalam sebuah element HTML. Sekarang kalau kita inggin mengganti text yang ada berdasarkan text input yang diberikan oleh visitor bagaimana caranya?

Untuk menyelesaikan problem tersebut kita bisa menggunakan cara dibawah.

Mengganti text dengan text input

Untuk melakukan hal ini kita harus membuat text input terlebih dahulu. Ambil text input yang diberikan oleh visitor dan gunakan untuk mengganti text yang kita inginkan.

Code JavaScript 2:

<script type="text/javascript">
function changeText2(){
   var userInput = document.getElementById('userInput').value;
document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Hai <b id='boldStuff2'>kamu</b>! Selamat datang di blog aku.</p>
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>

Hasil code JavaScript 2:

Hai kamu! Selamat datang di blog aku.


var userInput = document.getElementById('userInput').value;

Code ini artinya nyatakan [value] dari element dengan id [userInput]. Simpan value tersebut di dalam [userInput] variable.

document.getElementById('boldStuff2').innerHTML = userInput;

Code ini artinya nyatakan [innerHTML] dari element dengan id [boldStuff2] dan ganti menjadi [userInput] variable.

Mengganti style dengan innerHTML

Teknik berikut ini bisa kita gunakan untuk mengganti tampilan element HTML dengan style yang kita mau.

Misalkan saja kita tidak suka dengan warna text paragraph yang biasa dan ingin menggantinya dengan warna lainnya.

Code JavaScript 3:

<script type="text/javascript">
function changeText3(){
   var oldHTML = document.getElementById('para').innerHTML;
   var newHTML = "<span style='color:#0000FF'>" + oldHTML + "</span>";
   document.getElementById('para').innerHTML = newHTML;
}
</script>
<p id='para'>Hai <b id='boldStuff3'>kamu</b>! Selamat datang di blog aku.</p>
<input type='button' onclick='changeText3()' value='Change Text'/>

Hasil code JavaScript 3:

Hai kamu! Selamat datang di blog aku.

var oldHTML = document.getElementById('para').innerHTML;

Code ini artinya nyatakan [innerHTML] dari element dengan id [para]. Lalu simpan di dalam [oldHTML] variable.

var newHTML = "<span style='color:#ffffff'>" + oldHTML + "</span>";

Code ini artinya ganti style oldHTML variable. Lalu simpan di dalam [newHTML] variable.

document.getElementById('para').innerHTML = newHTML;

Code ini artinya nyatakan [innerHTML] dari element dengan id [para]. Lalu ganti hasilnya dengan [newHTML] variable.

3 Responses to “innerHTML Property Javascript”

  1. Aziz Rahman says:

    Gan, saya ada problem soal pmbahasan “Mengganti text dengan text input”.
    jd kasusnya gini gan. misal :

    function changeText2(){
    var userInput = document.getElementById(‘userInput’).value;
    document.getElementById(‘boldStuff2′).innerHTML = userInput;
    }

    Hai kamu! Selamat datang di blog aku.

    nah gmn caranya sy mengambil text yang tampil berdasarkan yg diketikan si user.. (only text) tanpa tag htmlnya(). soalnya text yg sy inputkan berupa url, dan url tsb akan sy olah lg utk berkelanjutan.. tnkz

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>