Pada kesempatan kali ini saya akan menjelaskan cara menggunakan HTML DOM createElement javascript. Perlu teman-teman ketahui sebelumnya, createdElement()  adalah salah satu method HTML Document javascript. Method createdElement() tersebut fungsinya adalah untuk membuat element html. Seperti pada contoh kasus yang akan saya buat disini dimana saya hanya memiliki struktur element HTML seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cara menggunakan HTML DOM createElement javascript</title>
</head>
<body>
<div class="view"></div>
</body>
</html>

Dari struktur tersebut terlihat dimana saya hanya memiliki satu buah element class dengan nama view, namun didalam element tersebut saya mau tambahkan satu buah element <span></span> didalamnya dengan menggunakan method createElement() javascript. Untuk membuatnya teman-teman bisa ikuti tahapan yang saya berikan dibawah ini.

Berikut Tahapannya :

  • Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
  • Jika sudah selanjutnya ketikan kode seperti berikut :
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cara menggunakan HTML DOM createElement javascript</title>
</head>
<body>
<div class="view"></div>
</body>
<script>
var span 		= document.createElement("span");
var textspan  	= document.createTextNode('Ini adalah contoh text nya !');
span.appendChild(textspan);
document.getElementsByClassName("view")[0].appendChild(span);	
</script>
</html>
  • Jika sudah simpan terlebih dahulu file index.html tersebut
  • Dan lihat hasilnya dibrowser kesayangan teman-teman

Sampai disini penjelasan saya mengenai cara menggunakan HTML DOM createElement javascript, semoga bermanfaat.