javascript - 创建一个全新的 div？

Question

我相信这非常容易，我看到了很多答案。我想使用 java 脚本制作一个全新的 div，并能够给它一个 id 并用 css 设置它的样式。我知道我可以使用 document.createElement 但它没有为我做任何事情。我设置了一个小提琴。你能不能让它工作，当我点击运行它会产生一个新的。我不需要任何解释，如果我看到它工作一次，我就能弄清楚。我不知道为什么这对我来说这么难。

div = document.createElement('div')
div.id = 'test'
#test{
 height: 46px;
width: 170px;
background-color: #23238e;
}

http://jsfiddle.net/philyphil/38rAy/embedded/result/

Answer 1

您需要将该新 div 元素添加到文档正文中。

document.body.appendChild(div);

为避免混淆，您可能希望将变量命名为“div”以外的名称。

Answer 2

您必须将其添加到文档中才能看到它：

div = document.createElement('div')
div.id = 'test'
document.body.appendChild(div);

http://jsfiddle.net/38ray/1/

div 存在于您的页面中的浏览器会如何？

Answer 3

创建节点时，它会将其分配给变量div，但它永远不会添加到文档中。你必须做类似的事情

div = document.createElement("div");
div.id = "test";
document.getElementById("container").innerHTML = div;

Answer 4

您需要将其插入 DOM。看看这个方法：

• 追加子

您还需要至少有 body 元素。例如：

var div = document.createElement('div');
div.id = 'test';

document.body.appendChild(div);

这是一个jsFiddle。

Answer 5

您创建 div 但从未将其放在页面上

您需要使用 document.body.appendChild 或我在此处使用的代码来附加 div

http://jsfiddle.net/38ray/2/

var body = document.getElementsByTagName('body') [0];

body.appendChild(div);

如果您想要更多的灵活性而不仅仅是附加到正文