如何在 javascript document.createElement 上应用链接方法

Question

我想在使用 javascript 的 document.createElement() 创建的元素上创建一个 jQuery 类型链接。每当我尝试对由我的函数定义的父对象执行运行我的 "append" 方法时，以下代码都会生成错误 "Cannot call method 'appendChild' of undefined"。感谢任何帮助或建议。

 this.el = (function () {
    function _el() {
        var self = this,
        ele;

        this.add = function (tag) {
            ele = document.createElement(tag);
            return this;
        },

        this.byId = function (id) {
            ele = document.getElementById(id);
            return this;
        },

        this.byClass = function (cl) {
            ele = document.getElementsByClassName(cl);
            return this;
        },

        this.id = function (name) {
            ele.id = name;
            return this;
        },

        this.cl = function (name) {
            ele.className = name;
            return this;
        },

        this.css = function (style) {
            _this.setCSS(ele, style);
            return this;
        },

        this.html = function (str) {
            ele.innerHTML = str;
            return this;
        },

        this.append = function (parent) {
            if (parent.nodeType === 1) {
                parent.appendChild(ele);
            }
            console.log(ele);
            console.log(ele.nodeType);

            return this;
        };
        return this;
    }
    return new _el();
}());

这就是我在代码中使用函数的方式。第一次使用有效，而第二次使用无效。它与我的函数返回的对象类型有关，但我不确定如何更正。

var dialog = hlp.el.add("div").cl("alphaDialog").append(document.body);

var top = hlp.el.add("div").append(dialog);

Answer 1

this.append 函数 returns this 包含 _ele js 对象的对象。我们必须 return 我们的 HTML 元素 ele。在 this.append 我们 return ele;

 this.el = (function () {
    function _el() {
        var self = this,
        ele;

        this.add = function (tag) {
            ele = document.createElement(tag);
            return this;
        },

        this.byId = function (id) {
            ele = document.getElementById(id);
            return this;
        },

        this.byClass = function (cl) {
            ele = document.getElementsByClassName(cl);
            return this;
        },

        this.id = function (name) {
            ele.id = name;
            return this;
        },

        this.cl = function (name) {
            ele.className = name;
            return this;
        },

        this.css = function (style) {
            _this.setCSS(ele, style);
            return this;
        },

        this.html = function (str) {
            ele.innerHTML = str;
            return this;
        },

        this.append = function (parent) {
            if (parent.nodeType === 1) {
                parent.appendChild(ele);
            }
            console.log(ele);
            console.log(ele.nodeType);

            //return this; // this holds javascript object, not element

            return ele;   // return our ele variable which holds the element
                          // this.append() is the end of the chain
        };
        return this;
    }
    return new _el();
}());

如何在 javascript document.createElement 上应用链接方法

How do I Apply chaining method on javascript document.createElement

javascript

chaining