汎用的なDOMオブジェクト生成関数

いちいち document.createElement()を使ったりプロパティを指定したりするのが面倒なあなたへ。
ポイントは、第三引数のinnerの中にこの関数をネストして使えるという点。

code

var ce = function(elem, attr, inner) {
    var _elem = document.createElement(elem);
    if(inner) {
        if( typeof inner == "string") {
            _elem.innerHTML = inner || "";
        } else if( typeof inner == "object") {
            _elem.appendChild(inner);
        }
    }
    if(attr) {
        for(var i in attr) {
            if(i == "className") {
                _elem.className = attr[i];
            } else {
                _elem.setAttribute(i, attr[i]);
            }
        }
    }
    return _elem;
}

Howtouse

var div = ce("div",{
    id : "hoge",
    className : "foo",
    "data-example" : "var"
},ce("a",{
    href : "http://qiita.com"
},"Link to Qiita"));
document.body.appendChild(div);

html

<div id="hoge" class="foo" data-example="var">
<a href="http://qiita.com">Link to Qiita</a>
</div>