使用JavaScript将Div创建为Div

Question

我有这个代码 。

它在jsfiddle中工作，但是当我在我的文件中测试它时问题不起作用。

我只显示了html创建的前三行：

测试h1

测试h2

测试p

（我在不同的浏览器中测试代码，javascript工作但是同样的问题）。

代码：

    var div2= document.createElement('div');  
    div2.className = "div2" ;
    var h1 = document.createElement('h1');
    h1.innerHTML= "test h1" ;
    var h2 = document.createElement('h2');
    h2.innerHTML= "test h2" ;
    var p = document.createElement('P');
    p.innerHTML= "p2" ;            
    div2.appendChild(h1);
    div2.appendChild(h2);
    div2.appendChild(p);
   document.getElementById('div1').appendChild(div2);

谢谢。

Answer 1

在您自己的应用程序中运行此代码之前，您可能不会等待加载Document。 尝试将代码包装在此块中。

window.onload = function() {
    [your code here]
}

Answer 2

问题可能与您运行脚本时有关。 在你的jsFiddle中，你保存了项目默认值（这意味着你的代码是在onLoad事件期间被调用的，并且包含了MooTools库）。

如果我将项目切换到No Wrap（head）和No-Library（纯JS），代码将停止工作。

原因是您在将DOM完全加载到内存之前尝试使用DOM。 您需要在页面底部运行脚本（您可以通过将下拉列表更改为No Wrap（正文）在jsFiddle中进行模拟），或者在浏览器中触发onLoad事件后运行if：

window.onload = function(){
        var div2= document.createElement('div');  
        div2.className = "div2" ;
        var h1 = document.createElement('h1');
        h1.innerHTML= "test h1" ;
        var h2 = document.createElement('h2');
        h2.innerHTML= "test h2" ;
        var p = document.createElement('P');
        p.innerHTML= "p2" ;            
        div2.appendChild(h1);
        div2.appendChild(h2);
        div2.appendChild(p);
       document.getElementById('div1').appendChild(div2);
};

当onLoad事件被触发时，当DOM准备好访问时，它将运行它。

看到这个小提琴： http ： //jsfiddle.net/mori57/jzBpK/