使用JavaScript將Div創建爲div

它在jsfiddle中工作，但當我在我的文件中測試它不工作時的問題。

我只顯示由HTML創建的第一個三行：

測試H1

測試H2

檢驗p

（I測試在不同瀏覽器和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);

謝謝。

來源

2012-11-05 Mils

一樣的jsfiddle是，你等待文件試圖追加到'div1'之前加載？ –

@ Sushanth--只需將其設置爲jQuery和/或純JavaScript即可解決問題...... OP需要在DOM準備就緒後運行它。 –

@ Sushanth--爲什麼框架需要改變？這與它無關 – Ian

在您的應用程序中運行此代碼之前，很可能您並未等待文檔加載。嘗試在這個塊中包裝你的代碼。

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

來源

2012-11-05 17:09:43 earl3s

該問題可能與您在運行腳本時有關。在你的jsFiddle中，你保存了項目的默認值（這意味着你的代碼在onLoad事件中被調用，並且包含MooTools庫）。

如果我將項目切換到No Wrap（head）和No-Library（純JS），代碼將停止工作。

原因是，您正試圖在DOM完全加載到內存之前完成與DOM的工作。您需要在頁面底部運行腳本（您可以通過將下拉列表更改爲「無換行」（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-05 17:13:16

使用JavaScript將Div創建爲div

回答

相關問題