Cara Menambahkan Elemen HTML DOM Javascript

Kali ini kita akan belajar mengedit tag-tag HTML-nya. Mengedit disini artinya ada tiga hal yang pertama kita bisa menambahkan elemen baru yang kedua menghapusnya dan yang terakhir adalah menggantinya atau mengubahnya. Disini saya membuat satu <div> dengan id box.

dan sedikit style CSS

Pertama kita bahas cara menambahkan elemen. Jadi kita bisa tambahkan elemen baru dijavascript cara penulisannya dengan menggunakan metode createElement

lalu didalam buka tutup kurungnya akan kita isi nama tag HTML yang akan kita buat. Misalnya saya buat tag <p> yang kita simpan di satu variabel sebagai berikut

lalu lanjut paragraf tersebut kita tidak mau kosong tentunya maka dari itu kita akan buat metode baru lagi yaitu createTextNode dimana metode tersebut untuk mengisi atau membuat text. Contohnya sebagai berikut

parameternya kita tuliskan text apa saja yang akan kita isi. Kita juga akan simpan divariabel dengan nama text. Satu lagi karena kita ingin menambahkan paragraf tersebut kedalam boxnya untuk itu kita pilih <div> id boxnya

diatas kita sudah buat masing masing variabel-variabelnya. Sekarang kita tinggal gabungin variabel tersebut. Yang pertama kita mau masukkin textnya ke dalam tag HTML-nya dengan metode appendChild

jadi dengan metode diatas kita akan memasukkan textnya kedalam elemen paragrafnya dan satu lagi setelah itu kita ambil tag paragrafnya yang kita masukkan kedalam id box

kita jalankan pada browser pastikan textnya sudah tampil sebagai tag <p> disana

jadi itu dia cara kita menambahkan elemen baru dengan javascript. Selamat mencoba teman teman.