Pada kesempatan kali ini saya akan menjelaskan cara membuat element baru di javascript. Mungkin sebagian dari teman-teman sudah mengetahui bagaimana cara menambahkan element html dengan innerHTML javascript. Sebenarnya terdapat beberapa cara yang bisa teman-teman lakukan untuk menambahkan suatu element html, seperti menggunakan method .innerHTML() atau document.createElement(“”). dari masing-masing method tersebut terdapat kekurangan dan kelebihan tersendiri namun kelebihan dan kekurangan dari beberapa method tersebut kembali lagi kepada kebutuhan teman-teman.
Namun pada contoh yang akan saya berikan disini saya menggunakan method createElement. Perbedaan dari method innerHTML dan createElement() adalah dimana ketika teman-teman menggunakan method innerHTML lebih mudah jika dibandingkan dengan menggunakan method createElement(). Akan tetapi saya lebih senang dengan menggunakan method createElement(), meskipun menggunakan method tersebut lebih rumit jika dibandingkan dengan innerHTML namun method tersebut menurut saya dapat memenuhi segala kebutuhan sesuai dengan logical yang ingin saya buat.
Jika menggunakan method innerHTML teman-teman bisa langsung memasukan element yang ingin dibuat menjadi satu, berbeda jika teman-teman menggunakan createElement(). Untuk setiap atribute element yang ingin dibuat tidak bisa secara langsung dan perlu dibuat berurutan sesuai dengan element dan attribute-attribute yang ingin dibuat. Untuk kode createElement() wajib dibuat diawal kode JavaScript yang teman-teman buat, baru kemudian bisa dilanjut dengan membuat attribute-attribute lainnya seperti class, style, text, dll. Pada contoh disini saya akan contohkan membuat tabel dengan method createElement().
Berikut Contohnya
- Teman-teman salin kode berikut kedalam file html teman-teman
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Membuat Element Baru Di JavaScript</title> </head> <style> table.gayabaru { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; margin:auto; } table.gayabaru th { border-width: 1px; padding: 8px; border-style: solid; border-color: #333; background-color: #000; color: #fff; } table.gayabaru td { border-width: 1px; padding: 8px; border-style: solid; border-color: #888; background-color: #ffffff; color: #000; } </style> <body> <div id="content"></div> </body> <script type="text/javascript"> var Mahasiswa = [ {"Nama":"Gofur","Jenis Kelamin":"Pria","Alamat Lengkap":"Jl.Danau Toba Rt.01/01 No.05, Sumatera Utara-Indonesia"}, {"Nama":"Marcell","Jenis Kelamin":"Pria","Alamat Lengkap":"Jl.Gerobak Andonk Rt.02/05 No.06, Serayu Opak-Indonesia"}, {"Nama":"Shinta","Jenis Kelamin":"Wanita","Alamat Lengkap":"Jl.Jamrud Rt.03/07 No.09, Jakarta, Indonesia"} ]; function buildTable(data) { var table = document.createElement("table"); table.className="gayabaru"; var thead = document.createElement("thead"); var tbody = document.createElement("tbody"); var headRow = document.createElement("tr"); ["Nama","Jenis Kelamin","Alamat Lengkap"].forEach(function(news) { var th=document.createElement("th"); th.appendChild(document.createTextNode(news)); headRow.appendChild(th); }); thead.appendChild(headRow); table.appendChild(thead); data.forEach(function(news) { var tr = document.createElement("tr"); for (var i in news) { var td = document.createElement("td"); td.appendChild(document.createTextNode(news[i])) tr.appendChild(td); } tbody.appendChild(tr); }); table.appendChild(tbody); return table; } window.onload=function() { document.getElementById("content").appendChild(buildTable(Mahasiswa)); } </script> </html> |
- Jika sudah lihat hasilnya melalui Browser kesayangan teman-teman
Sampai disini penjelasan saya mengenai cara membuat element baru di javascript, semoga bermanfaat.