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

Applying chaining pattern to creation of an element and its children?

本文关键字：元素 创建 模式 应用于 链接      更新时间：2023-09-26

我有一个函数

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函数接受两个参数，即元素的名称和文本值。

如果您对如何在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');
相关文章：