How do I Apply chaining method on javascript document.createElement

Question

I would like to create a jQuery type chaining on an element created using javascript's document.createElement(). The following code is generating an error "Cannot call method 'appendChild' of undefined" whenever I try to run my "append" method on a parent object that was defined by my function. Any help or suggestions are appreciated.

 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();
}());

This is how I use the function in my code. The first use works while the second one does not. It has something to do with the type of object being returned by my function but I am not sure how to correct.

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

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

Answer 1

this.append function returns this object which holds _ele js object. We have to return our HTML element ele. In this.append we 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();
}());