Bir html dosyasındaki div’in içine ol ve li etiketlerinden oluşan elementleri oluşturur, bu elementlere özellik atar ve içine bir şeyler yazdırdıktan sonra listeletir.
index.html
<!doctype html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Javascript - div İçine Element Ekle</title>
<script type="text/javascript" src="dosya.js"></script>
</head>
<body onload="diziListele()">
<div id="content">
</div>
</body>
</html>
dosya.js
function diziListele() {
var dizi = [];
var sayac = 0;
var liste = document.createElement('ol');
liste.setAttribute("id", "array-lst");
document.getElementById("content").appendChild(liste);
for(var i=10; i<=100; i+=10) {
dizi[sayac] = i;
var listeOgesi = document.createElement('li');
listeOgesi.setAttribute("id", "oge-" + sayac);
sayac++;
listeOgesi.innerHTML = i + ". değer";
document.getElementById("array-lst").appendChild(listeOgesi);
}
}
dosya.js (Açıklamalı)
function diziListele() {
var dizi = [];
var sayac = 0;
//--------------------------------------------------
//Element oluşturduk.
//--------------------------------------------------
var liste = document.createElement('ol');
//--------------------------------------------------
//Elemente id değerini verdik. (Attribute)
//--------------------------------------------------
liste.setAttribute("id", "array-lst");
//--------------------------------------------------
//liste isimli elementi id değeri "content" olan
//elemente alt eleman olarak ekle.
//Yani div'in içine ol etiketi ekledik.
//--------------------------------------------------
document.getElementById("content").appendChild(liste);
for(var i=10; i<=100; i+=10) {
dizi[sayac] = i;
//--------------------------------------------------
//ol elementine diziyi eklemek için li etiketlerini
//kullanacağız. li elementini oluşturduk.
//--------------------------------------------------
var listeOgesi = document.createElement('li');
//--------------------------------------------------
//li elementi için birden fazla attribute ayarladık.
//--------------------------------------------------
listeOgesi.setAttribute("id", "oge-" + sayac);
listeOgesi.setAttribute("class", "stil1");
sayac++;
//--------------------------------------------------
//<li></li> etiketleri içine bir şeyler
//yazdırmak için bunu kullandık.
//--------------------------------------------------
listeOgesi.innerHTML = i + ". değer";
//--------------------------------------------------
//Şimdi döngü ile <li>Değerler</li> şeklinde elementleri
//düzenledik ama bizim istediğimiz ol etiket içinde de
//listelenmesi gerekiyor. Yukarıda zaten "array-lst" id
//değerine sahip bir ol elementi oluşturmuştuk. Şimdi
//döngü ile sırayla oluşturulan li elementini yine
//sırayla eklenmesini sağlayalım.
//--------------------------------------------------
document.getElementById("array-lst").appendChild(listeOgesi);
}
}