如何创建一个使用给定标签名称创建新 HTML 元素并具有操作它的方法的 ES6 类？答案

【问题标题】：How can I create an ES6 class that creates new HTML elements using given tag name and has methods to manipulate it?如何创建一个使用给定标签名称创建新 HTML 元素并具有操作它的方法的 ES6 类？
【发布时间】：2020-09-01 04:28:30
【问题描述】：

我正在尝试在 ES6 中创建一个类，该类将创建具有给定标签名称的新 HTML 项目。其中将是附加它或更改 innerHTML 的方法。

我的问题：
1）如何将一个新的标签名称传递给 document.createElement，因为literal${} 没有像我预期的那样工作
2) 在哪里将“this”转换为新创建的“HTMLElement”到 HTML 元素 (createElement)。我有一种感觉它不应该在构造函数中，但我不知道在哪里放置它，类会在创建时对其进行转换。

class HTMLElement {
  constructor (tagName){
    this.tagName = document.createElement(`${tagName}`);
  }

  addText(text) {
    this.innerHTML = text;
  }

  appendItem(parent) {
    let appendTo = document.getElementsByTagName(`${parent}`);
    appendTo.appendChild(this);
  }
}

【问题讨论】：

标签： javascript html class ecmascript-6 dom-manipulation

【解决方案1】：

你可能想得太笼统了，不同类型的事件可以有不同的参数，所以你应该考虑一下，并根据标签名称设置属性。例如，如果您想创建 button，它将有一个 name，这对于 span 或 div 不是必需的或者如果你想创建一个 input 元素，你可能需要设置一些 default value。

要处理这个问题，您可以处理标签单独或组类似的元素（标签）与共同属性。

回答你的观点，

1.) 可以直接传值

this.tagName = document.createElement(tagName);

2.) 这里的“this”是一个对象，你创建的元素存放在this.tagName上

appendItem(parent) {
    let appendTo = document.getElementsByTagName(parent);
    appendTo.appendChild(this.TagName);
  }

【讨论】：

嗨阿米特，抱歉回复晚了！但说实话，我现在只知道我真正想要实现的目标，即我对 JS 和模式的了解更多一些。我真正想要的是一个工厂来创建像我们与我的课程团队Element factory 一起开发的这种元素。它创建具有给定属性的 html 元素。无论如何，对不起，谢谢你的回答！