Aynı Class Değerine Sahip Tüm Elementleri Bir div Elementine Aktar - Javascript


Bir sayfadaki aynı class ismine sahip tüm elementleri yine javascript ile oluşturduğumuz bir div içine aktarmaya yarayan javascript kodu alternatifidir.

Kod


var yeniDiv = document.createElement('div');
yeniDiv.id = "depo-div"
yeniDiv.style.cssText = 
	''
	+ 'position:absolute;'
	+ 'fixed: top;'
	+ 'width:80%;'
	+ 'height:auto;'
	+ 'top: 150px;'
	+ 'left: 20px;'
	+ 'opacity:1;'
	+ 'z-index:100;'
	+ 'background:#ff0000;'
	+ 'color:black';
	
document.body.appendChild(yeniDiv);
var veri = document.getElementsByClassName("content");

for(var i=10; i>=0; i--) {
	document.getElementById("depo-div").appendChild(veri[i]) + "<br>";
}

var x = window.open('');
x.document.write(yeniDiv.innerText);

Kod (Açıklamalı)


//--------------------------------------------------
//Yeni bir div elementi oluştur.
//--------------------------------------------------
var yeniDiv = document.createElement('div');

//--------------------------------------------------
//Yeni div elementinin id değerini ayarla.
//--------------------------------------------------
yeniDiv.id = "depo-div"

//--------------------------------------------------
//Yeni div elementinin stil özelliklerini
//ayarla. İlk baştaki '' şeklindeki boş
//atamayı bütün css değerleri aynı hizada
//durması amacıyla eklendi. Bunun dışında
//bir işlevi yok.
//--------------------------------------------------
yeniDiv.style.cssText = 
	''
	+ 'position:absolute;'
	+ 'fixed: top;'
	+ 'width:80%;'
	+ 'height:auto;'
	+ 'top: 150px;'
	+ 'left: 20px;'
	+ 'opacity:1;'
	+ 'z-index:100;'
	+ 'background:#ff0000;'
	+ 'color:black';
	
//--------------------------------------------------
//Oluşturulan div elementini sayfaya ekle.
//--------------------------------------------------
document.body.appendChild(yeniDiv);

//--------------------------------------------------
//class değeri "content" olan 
//elementleri dizi değişkenine aktar.
//--------------------------------------------------
var veri = document.getElementsByClassName("content");

//--------------------------------------------------
//veri isimli değişkendeki içerikleri "depo-div" id
//değerine sahip değişkene boşluk ekleyerek aktar.
//--------------------------------------------------
for(var i=10; i>=0; i--) {
	document.getElementById("depo-div").appendChild(veri[i]) + "<br>";
}

//--------------------------------------------------
//Yeni pencere oluştur ve bunu değişkene aktar.
//--------------------------------------------------
var x = window.open('');

//--------------------------------------------------
//div elementinin son halinin içeriğini
//yeni pencerede yazdır.
//--------------------------------------------------
x.document.write(yeniDiv.innerText);

Etiketler
javascript açıklamalı içerik