Javascript appendChild() immer am letzten Kindknoten

[Steve]

Guten Abend oder Morgen,

ich möchte diese Struktur mit Javascript nachbauen (um den Hintergrund bei Bedarf teilweise ein- oder ausschalten zu können).

  
<div> <!-- Hintergrund 4 -->  
  <div> <!-- Hintergrund 3 -->  
    <div> <!-- Hintergrund 2 -->  
      <div> <!-- Hintergrund 1 -->  
        Inhalt  
      </div  
    </div  
  </div  
</div  

Ich habe es in dieser Form auch hinbekommen, aber ich wollte die ganze Erstellung nun noch in eine Schleife packen.

//Ein Div erstellen und Styles zuweisen etc  
var neuesDiv = document.createElement("div");  
var hierRan = document.getElementById("hierSollsRan");  
for(var x = 0; x < 4; x++){  
  var div = neuesDiv.cloneNode(true);  
  if(hierRan.hasChildNodes()){  
    //Hier liegt nur mein Verständnis Problem.  
  }  
  else{  
    hierRan.appendChild(div);  
  }  
}

Also ich erstelle das DIV vor der Schleife (um für alle vier DIVs gemeinsame Styles anzugeben, etc) und kopiere es dann in der Schleife. Das Problem was ich nun habe ist, dass ich einfach nicht verstehe wie ich die neuen DIVs anhängen muss damit sie ineinander Verschachtelt sind. Ich habe schon eine ganze Weile daran gearbeitet aber es will mir nicht gelingen. Ich habe mit einer IF-Abfrage überprüft ob "hierRan" schon einen Kindknoten hat. Wenn nicht füge ich das neue DIV einfach an (-> hierRan.appendChild(div)). Nun wenn ich alles richtig Verstanden habe muss ich nun wenn "hierRan" schon einen Kindknoten hat, das neue DIV an diesen anfügen. Aber an diesen Punkt komme ich einfach nicht weiter.

Gruß und Dank

Steve

[Edgar Ehritt]

Hallo Steve,

var neuesDiv = document.createElement("div");

var hierRan = document.getElementById("hierSollsRan");
for(var x = 0; x < 4; x++){
  var div = neuesDiv.cloneNode(true);
  if(x>0){

hierRan.getElementByTagName('div')[x-1].appendChild(div);

}
  else{
    hierRan.appendChild(div);
  }
}

  
mehr ist es gar nicht.  
  
  
Gruß aus Berlin!  
eddi