Question

我有这段代码code。

它在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/

使用JavaScript将Div创建为Div

2 个答案: