Pada tutorial kali ini Anda akan belajar bagaimana Cara Memasukan String ke Dalam Element HTML dengan InnerHTML pada Javascript. Table of Contents
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" title="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.
Example
Get the HTML content of an element with id="myP":
let html = document.getElementById("myP").innerHTML;
Try it Yourself »
Change the HTML content of an element with id="demo":
document.getElementById("demo").innerHTML = "I have changed!";
Try it Yourself »
Get the HTML content of a <ul> element with id="myList":
let html = document.getElementById("myList").innerHTML;
Try it Yourself »
Delete the HTML content of a <p> element with id="demo":
element.innerHTML = "";
Try it Yourself »
More examples below.
Definition and Usage
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
The Differences Between innerHTML, innerText and textContent
See below
Syntax
Return the innerHTML property:
Set the innerHTML property:
Property Value
Property | Description |
String | HTML content. |
Return Value
Type | Description |
String | The HTML content of the element. |
More Examples
Example
Change the HTML content of two elements:
let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;
Try it Yourself »
Example
Repeat the HTML content of an element:
element.innerHTML += element.innerHTML;
Try it Yourself »
Example
Change the HTML content and URL of a link:
element.innerHTML = "W3Schools";
element.href = "//www.w3schools.com";
Try it Yourself »
The Differences Between innerHTML, innerText and textContent
The innerHTML property returns: The text content of the element, including all spacing and inner HTML tags. |
The innerText property returns: Just the text content of the element and all its children, without CSS hidden text spacing and tags, except <script> and <style> elements. |
The textContent property returns: The text content of the element and all descendaces, with spacing and CSS hidden text, but without tags. |
HTML Example
<p id="myP"> This element has extra spacing and contains <span>a span element</span>.</p>
JavaScript Examples
let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;
Try it Yourself »
In the example above:
The innerText property returns: This element has extra spacing and contains a span element. |
The innerHTML property returns: This element has extra spacing and contains <span>a span element</span>. |
The textContent property returns: This element has extra spacing and contains a span element. |
Browser Support
element.innerHTML is supported in all browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
Inner HTML untuk apa?
innerHTML adalah sebuah atribut di dalam (objek) elemen HTML yang berisi string HTML. Dengan innerHTML , kita dapat menampilkan output ke elemen yang lebih spesifik.
Apa fungsi console?
Fungsi console.log() adalah fungsi untuk menampilkan teks ke console Javascript. Fungsi console.log() biasanya digunakan untuk debugging. Karena setiap pesaan error di Javascript selalu ditampilkan di dalam Console. Selain console.log() , terdapat juga beberapa fungsi untuk debugging seperti console.
Manakah penjelasan yang benar mengenai perbedaan antara innerText dan innerHTML?
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 ...
Bagaimana membuat komentar di javascript?
Mereka mudah ditulis dan dikenali: blok komentar JavaScript (juga dikenal sebagai komentar multi-baris) dimulai dengan * /, sedangkan komentar baris tunggal dimulai dengan //. Dalam bahasa pemrograman, komentar juga dapat digunakan untuk mencegah beberapa baris kode dieksekusi.