Question

我有一个功能

function createElement(name, value, parent) {
    var ele = document.createElement(name);
    ele.innerHTML = value;
    parent.appendChild(ele);

    return ele;
}

创建元素，添加值并将其附加到父元素。现在我想让它成为可链接的，你可以在同一个对象上多次调用一个函数。

使用上述函数生成<div><span></span></div>，它看起来像

var div1 = createElement('div', 'Div1', document.body);
var span = createElement('span', 'Span', div1);

因此，为了通过Chaining获得预期的输出，我想申请

document.body.createChild('div', 'Div').createChild('a', 'Anchor')

...依此类推，createChild函数在两个参数中包含元素名称和文本值。

Answer 1

如果您对如何在JS中创建链接模式感兴趣。这是一个例子：

var chain = function (el) {
    return {
        createElement: function (name, value) {
            var ele = document.createElement(name);
            ele.innerHTML = value;
            el.appendChild(ele);
            return chain(ele);
        }
    };
};

var el = document.getElementById('test');
chain(el).createElement('div','Div1').createElement('span','Span');

会导致

<div id="test"><div>Div1<span>Span</span></div></div>

但如果你想将列表链接到一个元素，你需要一些 fancier 。或者对于这个例子

var ul = chain(ul);
ul.createElement('li', '1');
ul.createElement('li', '2');

将链接模式应用于元素及其子元素的创建？

1 个答案: