Question

var dom = (function(){
    var tags = [
        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
        'div', 'span', 'bold', 'small', 'strong',
        'script', 'style'
    ];
    var myObj = {};
    for(var index in tags) {
        var tag = tags[index];
        var obj = Object.defineProperty(myObj, tag, {
            value: function(attr, html) {
                return document.createElement(tag).innerHTML = html;
            }
        });
    }
    return myObj;
}());

我想要这样的结果

dom.h1('Hello World') = <h1>Hello World</h1>

Answer 1

执行该函数时，tag变量引用最后一个字符串，即style元素。因此，所有函数都会生成style元素。您应该使用自调用函数或Array.prototype.forEach方法。
for ... in循环不是迭代数组的好选择。

您应该使用另一个语句生成元素并更新它的内容，否则该函数将返回赋值的右侧：

for(var index = 0; index < tags.length; index++) {
    (function(tag) {
        Object.defineProperty(myObj, tag, {
            value: function(attr, html) {
                var el = document.createElement(tag);
                el.innerHTML = attr;
                return el;
            }
        });
    })(tags[index]);
}

Answer 2

var dom = function () {
    var tags = [
        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
        'div', 'span', 'bold', 'small', 'strong',
        'script', 'style'
    ];
    var myObj = {};
    tags.forEach(function (t) {
        myObj[t] = function (html) {
            var el = document.createElement(t);
            el.innerHTML = html;
            return el;
        };
    });
    return myObj;
}();

如果某处有<div id="out"></div>，则可以将其与

一起使用

document.getElementById('out').appendChild(dom.h1('header!'));

我想在js中制作自己的dom

2 个答案: