Как применить метод цепочки на javascript document.createElement

Question

Я хотел бы создать цепочку типов jQuery для элемента, созданного с помощью javascript document.createElement(). Следующий код генерирует ошибку «Невозможно вызвать метод appendChild» неопределенного «всякий раз, когда я пытаюсь запустить мой метод« append »для родительского объекта, который был определен моей функцией. Любая помощь или предложения приветствуются.

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 this объект, который удерживает объект _ele расслоение плотной. Мы должны вернуть наш HTML-элемент ele. В 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(); 
}());