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
);
createElement(
{
nodeName: 'p',
textContent: 'Hi',
},
root,
true
);
这非常有用，但是如果我们想要创建一个元素的 HTML 字符串会发生什么呢？我们有一个createElement 片段，它可以按照这些思路做一些事情。唯一缺少的部分是将其附加到父元素。
更多内容请访问我的网站：https://www.icoderoad.com
