javascript - JavaScript 尝试创建新元素不起作用

Question

这感觉像是一个答案很明显的初学者问题，但我一生都无法弄清楚。我在下面尝试创建一个新元素并将其添加到正文中有什么问题？

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "popup");
newDiv.setAttribute("width", "400px");
newDiv.setAttribute("height", "400px");
newDiv.setAttribute("backgroundColor", "red");
document.getElementsByTagName("body")[0].appendChild(newDiv);
newDiv.style.position = "absolute";
newDiv.style.left = "25px";
newDiv.style.top = "25px";

Answer 1

宽度和高度属性不适用于其中的“px”，我也不确定背景属性。无论哪种方式，以下确实有效，并且是您应该这样做的方式：

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "popup");
newDiv.style.width="400px";
newDiv.style.height="400px";
newDiv.style.backgroundColor="red";
document.getElementsByTagName("body")[0].appendChild(newDiv);
newDiv.style.position = "absolute";
newDiv.style.left = "25px";
newDiv.style.top = "25px";

Answer 2

http://jsfiddle.net/4BBWj/2/ 设置 newDiv.style.backgroundColor 或设置属性 style = backgreound-color:red

高度和宽度相同。

并且还放了一些内容来看看。

Answer 3

这是我认为最好的方法。

var newDiv = document.createElement("div");
newDiv.id = "popup";

newDiv.setAttribute("width", "400px");
newDiv.setAttribute("height", "400px");

newDiv.style.position = "absolute";
newDiv.style.top = "25px";
newDiv.style.left = "25px";
newDiv.style.backgroundColor = "red";

document.body.appendChild(newDiv);