appendChild seltsames Verhalten in Javascript

Question

In der Prozedur des Erstellens und Anhängens von Elementen an eine Webseite, ich konfrontiert ein seltsames Verhalten von Javascript, das Ersetzen eines Kindes durch ein anderes statt anhängen. hier ist der Code:

var window = document.createElement("div"); //the minesweeper game window 
window.setAttribute("class", "window"); 
document.body.appendChild(window); 

var title_bar = document.createElement("div");//the title bar of the window 
title_bar.setAttribute("class", "title-bar"); 
window.appendChild(title_bar); 

var game_title = document.createElement("span");//the title of the game 
game_title.setAttribute("id", "game-title"); 
game_title.innerHTML = "Minesweeper Online - Beginner!"; 
title_bar.appendChild(game_title); 

var right_corner_div = document.createElement("div");// right corner buttons 
title_bar.appendChild(right_corner_div); 

var btn_minimize = document.createElement("span");//the minimize button 
btn_minimize.setAttribute("class", "btn"); 
btn_minimize.setAttribute("id", "btn-minimize"); 
btn_minimize.innerHTML = "-"; 
right_corner_div.appendChild(btn_minimize); 

var btn_close = document.createElement("span");//the close button 
btn_close.setAttribute("class", "btn"); 
btn_close.setAttribute("id", "btn-close"); 
btn_close.style.marginLeft = "3px"; 
btn_close.innerHTML = "×"; 
right_corner_div.appendChild(btn_close); 

var top = document.createElement("div");//top of window div, underneath the title bar 
title_bar.setAttribute("class", "top"); 
window.appendChild(top); 

aber im Gegensatz zu, was ich erwarte als Ergebnis zu sehen, die neueste div mit der Klasse Attribute von oben ersetzt die ersten div mit der Klasse Attribute Titelleiste. warum passiert das?

Answer 1

Sie haben title_bar hier statt top (zweite letzte Zeile in Ihrer Frage):

var top = document.createElement("div"); 
*title_bar*.setAttribute("class", "top"); 
window.appendChild(top); 

dass Ersetzen mit top und sollte es funktionieren.

Übrigens, benennen Sie keine Variable window in einem Browser, da dies der globalen Objektreferenz zugewiesen ist. Rufen Sie Ihre Variable game_window oder etwas anderes in diesen Zeilen stattdessen.

Sie auch wahrscheinlich kümmern sich nicht um den eigentlichen HTML-Klasse Attribut Ihrer Elemente und sollte die className Eigenschaft direkt stattdessen setzen:

top.className = "top"; // instead of top.setAttribute("class", "top");