这样的效果怎么用构造函数实现？

Question

const el= new genEl("div")

el.class("row") // 增加 class
el.content("<a>link</a>").style("color: red") // 增加内容并给内容增加颜色（当然还可以 .data() 增加 data-* 之类

请问这样的构造函数如何实现？

Answer 1

function genEl(tagName) {

  this.el = document.createElement(tagName);

  this.class = function(className) {
    this.el.classList.add(className);
    return this; 
  };

  this.content = function(content) {
    this.el.innerHTML = content;
    return this; 
  };

  this.style = function(styleString) {
    this.el.style.cssText = styleString;
    return this; 
  };

  this.data = function(key, value) {
    this.el.dataset[key] = value;
    return this; 
  };

  this.appendTo = function(parent) {
    parent.appendChild(this.el);
    return this; 
  };
}

使用：

const el = new genEl("div")
  .class("row")
  .content("<a>link</a>")
  .style("color: red")
  .data("example", "value")
  .appendTo(document.body);