Question

我正在阅读一本关于JavaScript的书，特别是关于链接方法的章节。我知道链条是如何工作的。这是我到目前为止所做的（DOM链接的一个例子）。

var app  = {};
app.dom =
{
      
        createElement : function(type)
        {
            this.element = document.createElement(type);
           
            this.html = function(html)
            {
                this.element.innerHTML = html;
                return this;
            };
            this.css = function(prop,value)
            {
          
                this.element.style[prop] = value;
                return this;
            }
            this.getElement = function()
            {
                return this.element;
            }
        }
}
new app.dom.createElement('p').html('hello word').css('border','1px solid');

此代码工作正常。它创建了一个p元素，在里面添加了html代码并添加了css属性。但我的问题是如何在不执行此操作的情况下将此创建的节点附加到正文（调用返回节点元素的getElement）

document.body.appendChild(new app.dom.element('p').html('hello world').css('border','1px solid').getELement());

相反，我不想使用构造函数的getElement方法，只是每次调用html方法或css方法时，node元素（this.element）都可以直接附加到body，如下所示：

document.body.appendChild(new app.dom.element('p').html('hello world').css('border','1px solid'));

这可能吗？

Answer 1

由于您的代码已经很糟糕，您可以写一些与此类似的内容（这是非常糟糕的主意，所以请不要在生产中使用此代码）：

var app = {};
app.dom = {
    createElement: function createElement(type) {
        element = document.createElement(type);

        element.html = function(html) {
            this.innerHTML = html;
            return this;
        }.bind(element);

        element.css = function(prop, value) {

            this.style[prop] = value;
            return this;
        }.bind(element);

        return element;
    }
};


document.body.appendChild(app.dom.createElement('p').html('hello world').css('border','1px solid'));

DOM链接方法，它返回JavaScripts中的dom元素

1 个答案: