Hallo teman-teman, balik lagi pada tutorial dumet school, pada tutorial kali ini saya akan membahas tentang bagaimana cara menyisipkan element HTML baru pada HTML DOM.
Kalau pada pertemuan kemarin kita membahas bagaimana cara menyisipkan CSS pada HTML DOM, atau teman-teman bisa baca pada artikel berikut Baca.
Nah sekarang mungkin kita langsung praktekan saja bagaimana caranya, silahkan teman-teman ketikan script berikut :
<!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">Dumet School.</p> </div> </body> </html>
Nah sekarang saya akan membuat sebuah element HTML baru, dimana nanti akan langsung tercetak di bawah kata Dumet School, silakan teman-teman ketikan script berikut :
<script>
var para=document.createElement("p");
var node=document.createTextNode("terbaik dan nomor satu.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
Dimana di atas dijelaskan bahwa saya membuat element p baru dengan fungsi createElement Dan mengisinya dengan kata terbaik dan nomor satu lalu saya mencetaknya didalam id div1.
Keseluruhan scriptnya adalah sebagai berikut :
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">Dumet School.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("Terbaik dan Nomor Satu.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
Maka hasilnya akan seperti berikut :
Oke cukup sekian artikel kali ini, selamat mencoba, semoga bermanfaat.
Terimakasih.