javascript - 創建DOM元素並追加到正文

我正在嘗試創建一個函數生成DOM元素。javascript - 創建DOM元素並追加到正文

function dom(tag,attr,inner){ 
    var tag = document.createElement(tag); 
    for (var key in attr) { 
     if (attr.hasOwnProperty(key)) { 
      tag.setAttribute(key,attr[key]); 
     } 
    } 
    tag.innerHTML = inner; 
    document.body.appendChild(tag); 
} 
dom('div',{class : 'test',id : 'test'},'hello world');

這個標籤似乎沒有創建，因爲功能dom輸出錯誤：

Uncaught TypeError: Cannot read property 'appendChild' of null all.js:438

我怎麼能作出正確的？謝謝。

來源

2014-05-23 Lewis

這是更大的圖書館這部分'文檔'是別的東西嗎？你有沒有網頁中的內容？ –

不是。我也試着在這個函數之外追加這個標籤，但沒有任何改變。 – Lewis

你可以在函數內部做一個'console.log（document）'並顯示它的結果。 – putvande

all.js在哪裏？如果all.js位於head元素中，則需要在onload或DOMContentLoaded之後運行代碼。

// DOMContentLoaded or load 
window.addEventListener("DOMContentLoaded", function(){ 
    dom('div',{class : 'test',id : 'test'},'hello world'); 
}, false);

Demo

來源

2014-05-23 11:43:43 GeckoTang

class是保留標籤，你不能用這個作爲重點。所以，你必須承擔類的另一個關鍵，並在這樣的循環檢查它：

function dom(tag,attr,inner){ 
     var el = document.createElement(tag); 
     for (var key in attr) { 
     if (attr.hasOwnProperty(key)) { 
      el.setAttribute(key,attr[key]); 
     } 

     if (key=="OtherIdentifierForClass"){ 
      el.setAttribute("class",attr[key]); 
     } 
    } 
    el.innerHTML = inner; 
    document.body.appendChild(el); 
} 
dom('div',{OtherIdentifierForClass : 'test',id : 'test'},'hello world');

此外，不命名你是元素的「標籤」，使用更描述名稱。

Here is a working example

來源

2014-05-23 11:43:59 Igle

我認爲可以使用'class'作爲標識符。你有錯誤嗎？ – putvande

其實是的。如果這不是錯誤，那麼可能會重複使用「標籤」作爲變量名稱。無論如何，它的工作原理是我爲我發佈的。如果這些不是錯誤，那麼代碼的其餘部分肯定有問題。看到這裏與類作爲關鍵：http://jsbin.com/gekagufu/2/edit?html,css,js,output這不起作用，並給出警告。 – Igle

javascript - 創建DOM元素並追加到正文

回答

相關問題