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

Question

const el= new genEl("div")el.class("row") // 增加 classel.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);