Cara mengisi HTML kosong dengan konten

Javascript memang ahli dalam bidang manipulasi, kali ini saya akan bahas cara mengisi HTML kosong dengan konten menggunakan javascript. Konten kosong adalah sebuah tag HTML divisi yang belum terisi teks atau apapun.

Contoh HTML Kosong

<div id="konten"></div>

Diatas adalah contoh kode HTML yang masih kosong, dan kita akan mengisi sebuah konten didalamnya menggunakan javascript. Kenapa harus pake javascript? Karena dengan javascript ini anda bisa mengisi konten yang berbeda pada setiap postingan.

Kode Javascript

<script type="text/javascript">
window.onload = function(){
document.getElementById("konten").innerHTML = "AKU ADALAH ISI KONTEN";
}
</script>
<div id="konten"></div>

Contoh

Jika menggunakan Function kodenya seperti ini

<div id="konten"></div>
<script type="text/javascript">
function isi(text){
document.getElementById("konten").innerHTML = text;
};
isi("Aku ini isi konten");
</script>

Jika menggunakan function Pastikan javascriptnya dibagian bawah dan kode HTMLnya dibagian atas, karena jika javascriptnya diatas maka kontennya tidak akan terbaca itu disebabkan karena tidak ada window.onload seperti contoh pertama. Jika kode kedua menggunakan window.onload maka dimanapun anda menyimpan kodenya maka kode tersebut akan tetap terbaca.

Kode HTML anda bisa simpan dibagian Sidebar, kemudian untuk memunculkan konten yang berbeda silahkan anda sisipkan kode javascriptnya di beberapa postingan anda yang inginkan, Jadi konten hanya akan muncul pada postingan yang anda tentukan. Contoh menampilkan gambar

<script type="text/javascript">
window.onload = function(){
document.getElementById("konten").innerHTML = "<img src='URLGambar'/>";
}
</script>
<div id="konten"></div>

Untuk pengisian konten menggunakan kode HTML, hal yang perlu anda perhatikan disini adalah tanda petik Jika pada innerHTML anda menggunakan tanda petik dua seperti contoh diatas maka pada pengisian src anda harus menggunakan tanda petik tunggal seperti kode diatas, begitu pula sebaliknya jika anda menggunakan tanda petik tunggal maka pada src anda harus menggunakan tanda petik ganda.

Contoh