Cara menggunakan don t use innerhtml

Dalam artikel kali ini saya akan membahas tentang Bagaimana Cara Menampilkan Hasil Form HTML dengan JavaScript. Artikel ini ditulis berdasarkan pertanyaan dari rekan kita Doe, pada Tutorial Belajar JavaScript: Cara Menampilkan Hasil Program JavaScript.

Table of Contents Show

Definition and Usage
The Differences BetweeninnerHTML, innerText and textContent
Property Value
Return Value
More Examples
The Differences BetweeninnerHTML, innerText and textContent
Apa itu inner HTML?
Manakah penjelasan yang benar mengenai perbedaan antara innerText dan innerHTML?

Berikut adalah pertanyaannya:

Gan, misalnya kita tuh klik button pada sebuah form yang nantinya akan 
menghasilkan informasi sesuai pilihan yang di pilih pada form 1. 
Tampilnya itu di bawah form itu gan.

(form id=tampil)
 select
 –option=jakarta
 –option=bandung
 input type=button onclick=klik()

misal:dipilihnya bandung, dibawah form tersebut ada info seputar bandung gan.
Saya coba pake document.write tapi css nya gak jalan. 
Saya pakai juga getElementById tetep belum jalan.

mohon pencerahannya.
Terima kasih

Dari pertanyaan tersebut saya akan mencoba untuk membuat sebuah halaman HTML yang akan menampilkan hasil dari form pada halaman yang sama menggunakan JavaScript.

Berikut adalah tampilan akhir kode program:

Dan berikut adalah kode HTML+JavaScript yang saya gunakan untuk menampilkan hasil diatas:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>

<script>
function tampilkan(){

  var nama_kota=document.getElementById("form1").select1.value;
  var p_kontainer=document.getElementById("container");

  if (nama_kota=="jakarta")
    {
        p_kontainer.innerHTML="Jakarta Ibu kota Republik Indonesia";
    }
  else if (nama_kota=="bandung")
    {
        p_kontainer.innerHTML="Bandung kota kembang";
    }
  else if (nama_kota=="bogor")
    {
        p_kontainer.innerHTML="Bogor kota hujan";
    }
}
</script>
</head>
<body>
<h2>Menampilkan Hasil Form HTML dengan JavaScript</h2>

<form id="form1" name="form1" onsubmit="return false">
  <label for="select1">Pilih Kota: </label>
  <select id="select1" name="select1">
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="bogor">Bogor</option>
  </select>
  <input type="submit" value="Tampilkan Keterangan" onclick="tampilkan()">
</form>

<p id="container"></p>

</body>
</html>

Anda bisa mencobanya dari tampilan CODEPEN dibawah ini:

See the Pen YPXPqa by duniailkom (@duniailkom) on CodePen.10206

Mari kita bahas kode HTML dan JavaScript diatas dengan lebih detail.

Kode HTML

Untuk membuat contoh form, berikut adalah kode HTMLnya:

<body>
<h2>Menampilkan Hasil Form HTML dengan JavaScript</h2>

<form id="form1" name="form1" onsubmit="return false">
  <label for="select1">Pilih Kota: </label>
  <select id="select1" name="select1">
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="bogor">Bogor</option>
  </select>
  <input type="submit" value="Tampilkan Keterangan" onclick="tampilkan()">
</form>

<p id="container"></p>

</body>

Pada contoh diatas saya membuat sebuah form dengan atribut id=”form1″ dan name=”form1″. Form ini hanya memiliki 1 objek form, yakni select dan 1 buah tombol submit untuk mengirimkan hasil form.

eBook JavaScript Uncover Duniailkom

JavaScript sudah menjadi fitur wajib di setiap website modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih lengkap, mulai dari dasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut bisa ke eBook JavaScript Uncover Duniailkom.

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

let html = document.getElementById("myList").innerHTML;

Delete the HTML content of a

element with id="demo":

More examples below.

Definition and Usage

The innerHTML property sets or returns the HTML content (inner HTML) of an element.

The Differences BetweeninnerHTML, innerText and textContent

See below

Syntax

Return the innerHTML property:

Set the innerHTML property:

Property Value

PropertyDescriptionStringHTML content.

Return Value

TypeDescriptionStringThe 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 = "https://www.w3schools.com";

Try it Yourself »

The Differences BetweeninnerHTML, 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

Apa itu inner HTML?

innerHTML adalah sebuah atribut di dalam (objek) elemen HTML yang berisi string HTML. Dengan innerHTML , kita dapat menampilkan output ke elemen yang lebih spesifik.

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 ...