Question

我正在尝试创建一个生成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

我怎么能做对的？谢谢。

Answer 1

all.js在哪里？如果all.js在head元素中，则需要在onload或DOMContentLoaded之后运行代码。

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

Demo

Answer 2

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');

此外，不要将您命名为元素“tag”，请使用更具描述性的名称。

Here is a working example

javascript - 创建dom元素并附加到body

2 个答案: