JavaScript-创建dom元素并追加到正文

Question

I'm trying to create a function generating dom element.

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

This tag didn't seem to be created because function dom output an error:

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

How could I make it right? Thank you.

Answer 1

Where is all.js? If all.js was in head element, you need to run the code after onload or DOMContentLoaded.

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

Demo

Answer 2

class is a reserved tag, you can't use this as a key. So, you have take another key for the class and check for it in the loop like this:

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

Furthermore, don't name you're element "tag", use a more describing name.

Here is a working example