Cara Menampilkan Data Array Ke Dalam Element Baru Javascript
Halo Dumenity, selamat datang kembali di situs tips dan trik Source Code Aplikasi. Berjumpa kembali dengan saya di tips dan trik seputar dunia situs. Di kesempatan kali ini saya akan memberikan tips mengenai Cara Menampilkan Data Array Ke Dalam Element Baru Javascript dimana di latihan kali ini kita akan belajar membangun element baru, looping data dan mamasukkan data ke pada element tersebut. Pada hal ini saya menggunakan tag ul li yang kemudian saya akan membangun sebuat list data, list dan yang saya ambil menurut dari data array yang sebelumnya saya telah siapkan.
Bagus, seketika saja kita implementasikan Cara Menampilkan Data Array Ke Dalam Element Baru Javascript pertama-tama – tama siapkan terlebih dahulu file html nya dan data array nya bagi kita tampilkan pada element baru nya. Saya membangun data seperti di bawah ini, apabila teman – teman gunakan data yang lain silahkan
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
</head>
<body>
<ul id=list></ul>
<script>
var data = [HTML, CSS, jQuery, PHP, Javascript];
</script>
</body>
</html>
Save dengan nama index.html, dan saya pun siapkan tag ul nya dengan id=”list” bagi pembungkus tag li yang baru, apabila telah kita bikin sebuah looping bagi mengurutkan data di array
for(i = 0; i <data.length; i++){
console.log(data[i])
}Sekiranya telah save dan jalankan di browsernya lalu buka di console nya
Data berhasil di looping, kemudian kita hapus console nya dan gantikan dengan script di bawah ini
var li = document.createElement(LI);
var isi = document.createTextNode(data[i]);
li.appendChild(isi);
document.getElementById(list).appendChild(li);
Sekiranya telah save dan refresh di browsernya, karenanya hasil ada di pada tag li
Demikianlah Cara Menampilkan Data Array Ke Dalam Element Baru Javascript sederhana, semoga manambah pengetahuan teman – teman pada mempelajari DOM dengan javascript. Bagi script lengkapnya dapat lihat di bawah ini
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
</head>
<body>
<ul id=list></ul>
<script>
var data = [HTML, CSS, jQuery, PHP, Javascript];
for(i = 0; i <data.length; i++){
var li = document.createElement(LI);
var isi = document.createTextNode(data[i]);
li.appendChild(isi);
document.getElementById(list).appendChild(li);
}
</script>
</body>
</html>
Terimakasih dan hingga jumpa, semoga bermanfaat.
Sumber https://kursuswebsite.org
