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

Question

I am trying to create a class in ES6 that would create new HTML items with a given tag name. In it would be methods to append it or change innerHTML.

My questions:
1) how to pass into the document.createElement a new tag name, because literal ${} is not working as I would expect
2) where to transform "this" - newly created "HTMLElement" into HTML element (createElement). I have a feeling it should not be in a constructor, but I don't know where to place it, do the class would transform it upon creating.

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

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

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

Answer 1

you are probably thinking of it too generically, different type of events can have different parameters, so you should think about that and based on the tag names you should set the properties. for example if you wanna create button it will have a name , which is not required for a span or div or if you wanna create a input element you may need to set some default value .

To handle this, you can either handle tags individually or group similar elements( tags ) with common properties .

Answering your point,

1.) you can directly pass the value

this.tagName = document.createElement(tagName);

2.) "this" here is an object, and the element you have created is stored on this.tagName

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