Membuat Elemen Gres Dengan Dom

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

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

Berikut langkah-langkahnya:

1. Untuk membuat elemen gres anda perlu memakai metode createElement().

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

   var newElem = document.createElement("h1");
2. Selanjutnya jikalau anda ingin menambahkan atribut untuk elemen H1, dan ini bersifat pilihan saja, anda perlu memakai 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 mengakibatkan teks dari elemen H1 diberikan imbas warna hijau.

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

   Jangan lupa membuat variabelnya, untuk rujukan ini variabel yang dibentuk yaitu newTextNode.

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

   Untuk rujukan ini elemen H1 beserta atribut dan nilainya akan ditambahkan ke bab BODY, dan akan menyerupai berikut:

   document.body.appendChild(newElem);

Berikut rujukan lengkapnya:

Dan rujukan di atas akan memiliki output yang sama saat anda menuliskannya menyerupai di bawah ini: