Penggunaan createElement createTextNode appendChild insertBefore removeChild dalam HTML DOM (HTML Programming)
Assalamu’alaikum..
Selamat malam semuanya.. dimalam kali ini seperti
biasa, dikosan hanya berteman boneka singa kesayangan dan lagu NOAH yang
memecah keheningan malam. Dalam tutorial kali ini saya akan membahas mengenai penggunaan
createElement, createTextNode, appendChild, insertBefore,removeChild dalam HTML
DOM. Apa sih HTML DOM itu?
DOM adalah singkatan dari Document Objek Model
Kalo saya sendiri menyebutnya sih konsep
‘anak-ortu’. Kok gitu? Iya, soalnya anak beranak gitu deh. Hehe
Contohnya si html punya anak head sama body. Tapi si
title juga anaknya html. Padahal title itu sendiri didalem head. Kok bisa gitu?
Nah saya juga masih bingung kalo kasus seperti itu.
Disini saya tidak membahas itu, melainkan penggunaan
createElement, createTextNode, appendChild, insertBefore,removeChild.
createElement= fungsi yang digunakan untuk membuat
elemen baru, misalnya paragraph(P), Header(H1), dll.
createTextNode = fungsi yang digunakan untuk membuat
isian dari elemen. Yah seperti wadah untuk menampung string yang nantinya akan
diisikan ke elemen baru yang telah dibuat.
appendChild=fungsi yang digunakan untuk menambahkan
suatu elemen setelah elemen lain. Ingat kata ‘end’ pada append. Artinya akhir
kan? Ya berarti menempatkan setelah akhir suatu elemen. Cara ngomongnya kalo
appendChild(a,b) berarti menambahkan a setelah b. Kalo appendChild(aku,kamu)
bererti menambahkanaku setelah kamu (ciyee.. maunya). Ingat, menambahkan elemen
x setelah elemen y.
insertBefore = fungsi ini kebalikan dari
appendChild. Kalo appendChild diakhir, maka insertBefore menambahkan diawal.
Cara ngomongnya insertBefore(a,b) berarti tambahkan a sebelum b.
removeChild=berfungsi untuk meremove / menghilangkan
child. Misalnya removeChild(h1) maka si h1 nantinya tidak akan ditampilkan.
Bingung? Yuk kita coba simak kodingan berikut untuk
lebih memahami.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="dv">
<p
id="p1">This is First Paragraph</p>
<p
id="p2">This is another Paragraph</p>
</div>
<script type="text/javascript">
var
pnew=document.createElement('p'); //membuat variabel pnew yang isinya nanti
adalah bisa diisikan elemen P(paragraph)
var
textnew=document.createTextNode('This is a new Paragraph');
pnew.appendChild(textnew);
//pnew menambahkan textnew setelahnya. Ini sama saja seperti mengisikan textnew
kedalam pnew
document.getElementById('dv').appendChild(textnew);
//menambahkan pnew ke div yg idnya ‘dv’
</script>
</body>
</html>
Kalo kodinganmu berhasil maka outputannya adalah:
This is
First Paragraph
This is
another Paragraph
This is a new Paragraph
Sekarang penggunaan insertBefore:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="dv">
<p
id="p1">This is First Paragraph</p>
<p
id="p2">This is another Paragraph</p>
</div>
<script type="text/javascript">
var
pnew=document.createElement('p');
var
textnew=document.createTextNode('This is a new Paragraph');
pnew.appendChild(textnew);
document.getElementById('dv').insertBefore(pnew,document.getElementById('p2'));
//menambahkan pnew setelah paragraf yg idnya p2
</script>
</body>
</html>
Kalo kodinganmu berhasil maka outputannya adalah:
This is First ParagraphThis is a new Paragraph
This is another Paragraph
Sekarang kita coba yang removeChild:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="dv">
<p id="p1">This is First Paragraph</p>
<p id="p2">This is another Paragraph</p>
</div>
<script type="text/javascript">
var pnew=document.createElement('p');
var textnew=document.createTextNode('This is a new Paragraph');
pnew.appendChild(textnew);
document.getElementById('dv').appendChild(textnew);
document.getElementById('dv').removeChild(document.getElementById("p1"));
//menghapus paragrf yg idnya p1</script>
</body>
</html>
Kalo kodinganmu berhasil maka outputannya adalah:
This is
another Paragraph
This is a new Paragraph
Paragraf pertamanya hilang.
Sekain penjelasan dari saya, maaf apabila masih belepotan dalam
menjelaskan. Terimakasih sudah menyimak. Semoga bermanfaat
Komentar
Posting Komentar