Membuat Elemen Baru dengan DOM

Anda bisa menggunakan beberapa metode dari DOM untuk membuat elemen, atribut, atau teks. Mereka adalah:

• createElement()
• setAttribute()
• createTextNode()
• appendChild()

Berikut langkah-langkahnya:

1. Untuk membuat elemen baru anda perlu menggunakan metode createElement().

   Tentukan elemen apa yang ingin dibuat, misalkan elemen H1 yang akan dibuat. Jangan lupa mendeklarasikan variabelnya, variabel yang dibuat kali ini adalah newElem.

   var newElem = document.createElement("h1");
2. Selanjutnya jika anda ingin menambahkan atribut untuk elemen H1, dan ini bersifat pilihan saja, anda perlu menggunakan metode setAttribute().

   Untuk langkah kedua ini misalkan ingin menambahkan atribut STYLE yang nilainya color: green untuk elemen H1:

   newElem.setAttribute("style", "color: green");

   Untuk di atas akan menjadikan teks dari elemen H1 diberikan dampak warna hijau.

3. Langkah berikutnya adalah menambahkan teks untuk elemen H1, anda perlu menggunakan metode createTextNode().

   Jangan lupa membuat variabelnya, untuk contoh ini variabel yang dibuat adalah newTextNode.

   var newTextNode = document.createTextNode("Halo Dunia!");
4. Sampai disini teks yang dibuat pada langkah ke 3 belum bisa ditambahkan untuk elemen H1, anda perlu menugaskan variabel newTextNode pada langkah ke 3 itu untuk variabel newElem melalui metode appendChild(), seperti berikut:
   newElem.appendChild(newTextNode);
5. Terakhir ingin ditambahkan di mana, di bagian BODY atau di bagian elemen HTML lainnya. Di sini juga akan melibatkan metode appendChild().

   Untuk contoh ini elemen H1 beserta atribut dan nilainya akan ditambahkan ke bagian BODY, dan akan seperti berikut:

   document.body.appendChild(newElem);

Berikut contoh lengkapnya:

<script> var newElem = document.createElement("h1"); newElem.setAttribute("style", "color: green"); var newTextNode = document.createTextNode("Halo Dunia!"); newElem.appendChild(newTextNode); document.body.appendChild(newElem); </script>

Dan contoh di atas akan mempunyai output yang sama ketika anda menuliskannya seperti di bawah ini:

<h1 style="color: green">Halo Dunia!</h1>