在JavaScript中创建HTML元素

JavaScript的Document.createElement()方法用于创建新的HTML元素。下面是它的使用示例：

const root = document.body;

const newElement = document.createElement('div');
newElement.textContent = 'Hello World';

root.append(newElement);

如你所见，创建一个元素很简单。繁琐的部分是需要设置所有的属性，然后将其添加到DOM中。更糟糕的是，创建具有相同属性集的多个元素需要大量重复的代码。

幸运的是，我们可以将元素创建抽象成一个函数。事实上，我们可以使用对象来传递属性给元素。使用Object.entries()，我们可以遍历对象并设置属性。下面是示例代码：

const root = document.body;

const createElement = (el, parent, prepend = false) => {
  const { nodeName = 'div', ...attrs } = el;
  const element = document.createElement(nodeName);
  Object.entries(attrs).forEach(([attr, value]) => {
    element[attr] = value;
  });
  if (prepend) parent.prepend(element);
  else parent.append(element);
};

createElement(
  {
    nodeName: 'div',
    textContent: 'Hello world',
  },
  root
);

```javascript
createElement(
  {
    nodeName: 'p',
    textContent: 'Hi',
  },
  root,
  true
);

这非常有用，但是如果我们有一个HTML字符串，我们想要从中创建一个元素，会发生什么呢？我们有一个createElement代码片段，可以做类似的事情。唯一缺少的部分是将其附加到父元素上。