1

我有这个代码代码。

它在 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);

谢谢你。​</p>

4

2 回答 2

3

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

window.onload = function() {
    [your code here]
}
于 2012-11-05T17:09:43.223 回答
1

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

如果我将您的项目切换到 No Wrap (head) 和 No-Library (pure JS)，代码将停止工作。

原因是您试图在 DOM 完全加载到内存之前对其进行处理。您需要在页面底部运行脚本（您可以通过将下拉菜单更改为 No Wrap (body) 在 jsFiddle 中模拟），或者在浏览器中触发 onLoad 事件后运行：

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/

于 2012-11-05T17:13:16.973 回答