Cara Membuat List html Otomatis Dari Array Javascript

Pada kesempatan kali ini saya akan menjelaskan cara membuat list html otomatis dari array javascript. Mungkin teman-teman sudah mengerti bagaimana cara membuat list di html, cukup dengan menuliskan kode <ul> dan <li>, teman-teman sudah bisa membuat list html tersebut. Namun berbeda dengan penjelasan yang saya jelaskan disini, pada contoh kasus yang saya temui, dimana saya ingin membuat list html namun dengan kode javascript, dan tanpa melalui html. Sebenarnya pada prinsif dan hasil nya tidak jauh berbeda ketika teman-teman membuat list tersebut melalui html, hanya saja saya membuatnya melalui kode javascript, dimana dari list tersebut nantinya sekaligus saya berikan warna background css melalui javascript yang diambil dari sebuah array color yang saya buat di array javascript tersebut.

Sebelumnya ada baiknya untuk teman-teman ketahui sebelumnya, pada contoh disini saya buat dengan fungsi javascript innerHTML. innerHTML dapat menetapkan atau mengembalikan konten HTML di dalam element yang di terapkan di fungsi tersebut. Dengan innerHTML tersebut, teman-teman dapat memanipulasi isi atau element HTML, seperti penambahan, perubahan dan penghapusan id, class, property style css, dll. Maka dari itu pada contoh kasus disini saya memanfaatkan salah satu fungsi javascript untuk memanipulasi list yang ingin saya buat. Dan untuk membuatnya teman-teman bisa ikuti contoh yang saya berikan dibawah ini.

Berikut Contohnya :

Sebelumnya, teman-teman buat terlebih dahulu satu buah file dengan nama index.html, dan ketikan seperti kode berikut

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Membuat List html Otomatis Dari Array Javascript</title>
	<style>
		body {
			font-family: sans-serif;
			margin: 20%
		}

		li { margin: 10px 0 }
	</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>

<script>
var colors = ['salmon', 'lightgreen', '#ccc', 'aqua'];
var output, brian, i;
brian = colors.length;
output = "<ul>";
for (i = 0; i < brian; i++) {
    output += "<li style='background-color:"+colors[i]+"'>" + colors[i] + "</li>";
}
output += "</ul>";
document.getElementById("demo").innerHTML = output;
</script>

<!DOCTYPE html>

<head>

<title>Cara Membuat List html Otomatis Dari Array Javascript</title>

<style>

body {

font-family: sans-serif;

margin: 20%

}

li { margin: 10px 0 }

</style>

</head>

<body>

</body>

</html>

var colors = ['salmon', 'lightgreen', '#ccc', 'aqua'];

var output, brian, i;

brian = colors.length;

output = "<ul>";

for (i = 0; i < brian; i++) {

output += "<li style='background-color:"+colors[i]+"'>" + colors[i] + "</li>";

}

output += "</ul>";

document.getElementById("demo").innerHTML = output;

</script>

Selanjutnya jika sudah, teman-teman save terlebih dahulu file tersebut dan lihat hasilnya melalui browser kesayangan teman-teman.

Sampai disini penjelasan saya mengenai cara membuat list html otomatis dari array javascript, semoga bermanfaat.

Cara Membuat List html Otomatis Dari Array Javascript

Berikut Contohnya :

Facebook DUMET School

Categories