javascript 中的 appendChild 奇怪行为

Question

在创建元素并将其附加到网页的过程中，我遇到了 javascript 的奇怪行为，即用另一个替换 child 而不是附加。这是代码：

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 = "&times;";
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);

但与我期望看到的结果不同，具有 top 的 class 属性的最新 div 将第一个 div 替换为 top 的 class 属性title-bar。为什么会这样？

Answer 1

你在这里 title_bar 而不是 top （你问题的倒数第二行）：

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

将其替换为 top，它应该可以工作。

顺便说一句，不要在浏览器中命名变量 window，因为这是分配给全局对象引用的内容。改为调用您的变量 game_window 或其他名称。

此外，您可能并不关心元素的实际 HTML class 属性，应该直接设置 className 属性：

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

javascript 中的 appendChild 奇怪行为

appendChild odd behavior in javascript

javascript

appendchild