Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang Cara Menampilkan Data Array Ke Dalam Element Baru Javascript dimana pada latihan kali ini kita akan belajar membuat element baru, looping data dan mamasukkan data ke dalam element tersebut. Dalam hal ini saya menggunakan tag ul li yang kemudian saya akan membuat sebuat list data, list dan yang saya ambil berdasarkan dari data array yang sebelumnya saya sudah siapkan.
Baik, langsung saja kita implementasikan Cara Menampilkan Data Array Ke Dalam Element Baru Javascript pertama – tama siapkan terlebih dahulu file html nya dan data array nya untuk kita tampilkan dalam element baru nya. Saya membuat data seperti di bawah ini, jika teman – teman pakai 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 juga siapkan tag ul nya dengan id=”list” untuk pembungkus tag li yang baru, jika sudah kita buat sebuah looping untuk mengurutkan data pada array
for(i = 0; i <data.length; i++){
console.log(data[i])
}
Jika sudah save dan jalankan pada browsernya lalu buka pada 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);
Jika sudah save dan refresh pada browsernya, maka hasil ada di dalam tag li
Demikianlah Cara Menampilkan Data Array Ke Dalam Element Baru Javascript sederhana, semoga manambah pengetahuan teman – teman dalam mempelajari DOM dengan javascript. Untuk script lengkapnya bisa 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 sampai jumpa, semoga bermanfaat.
The post Cara Menampilkan Data Array Ke Dalam Element Baru Javascript appeared first on Kursus Website Terbaik.