如何从 HTML 字符串创建 DOM 元素（多种方法）

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《如何从 HTML 字符串创建 DOM 元素（多种方法）》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

当我们需要创建简单的动态 html dom 元素时，我们可以使用 html 字符串模板。在 javascript 中有很多不同的方法可以实现这一点，但我们可能有一些考虑。

内部html

const container = document.createelement('div');
container.innerhtml = `
hello world
`;
const node = container.firstelementchild;

这是最常见的方法之一。将html字符串插入到容器元素的innerhtml中，然后访问生成的dom节点。

但是，它只能处理有效的 html 节点，即标准 html 结构中合法的元素。例如，如果您尝试将 元素插入

const template = document.createelement('template');
template.innerhtml = `
hello world
`;
const node = template.content.firstelementchild;