將鏈接模式應用於元素及其子元素的創建？

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>

但是，如果您想將列表鏈接到某個元素，則需要一些奇特的工具。 還是這個例子

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