javascript - Javascript中的简单createElement问题

Question

我认为以下脚本将创建 div 元素，但我的 html 中没有任何输出。谁能帮帮我？非常感谢。

var div=document.createElement('div');
div.setAttribute('id','testttttttt');

div.innerHTML='fjsoidfjiosdjfoi';​

Answer 1

您的 HTML 中没有任何内容，因为您的 HTML 位于服务器上。

您在 DOM 中一无所获，因为您尚未将元素添加到 DOM。

document.body.appendChild(div);

Answer 2

最后你必须使用该appendChild方法：

var div=document.createElement('div');
div.setAttribute('id','testttttttt');
div.innerHTML='fjsoidfjiosdjfoi';​
document.body.appendChild(div);

否则，创建的元素将存在，但不会出现在您的页面中。

另外，你必须确保它document.body存在，否则，它会抛出一个错误（如果这个脚本要在加载时执行，把它放在一个onload事件中）。

PS：您还可以附加到任何其他 DOM 元素：

document.getElementById('myDivHolder').appendChild(div);

JSFiddle 示例：http: //jsfiddle.net/AkXTr/

Answer 3

除了创建元素之外，您还必须将其插入到 DOM 中。您可以使用该appendChild()方法将其添加到给定父元素的末尾：

var div=document.createElement('div');
div.setAttribute('id','testttttttt');

div.innerHTML='fjsoidfjiosdjfoi';

// Now, append it
document.getElementById('someOtherElement').appendChild(div);

Answer 4

您实际上需要将其附加到某些东西上；我猜document.body会的。

var div = document.createElement('div');
div.id = 'testttttttt';
div.innerHTML = 'fjsoidfjiosdjfoi';​

document.body.appendChild(div);

但是，请确保在document.body实际存在时执行此操作，即在load事件中或body元素本身内部。

Answer 5

您正确创建了 div，只是它挂在任何地方。它需要插入到文档中，例如

        var div=document.createElement('div');
        div.setAttribute('id','testttttttt');
        div.innerHTML='fjsoidfjiosdjfoi';
        document.getElementsByTagName("body")[0].appendChild(div);