当我们需要创建简单的动态 html dom 元素时，我们可以使用 html 字符串模板。在 javascript 中有很多不同的方法可以实现这一点，但我们可能有一些考虑。
内部html
const container = document.createelement('div');container.innerhtml = `hello world`;const node = container.firstelementchild;
登录后复制
这是最常见的方法之一。将html字符串插入到容器元素的innerhtml中，然后访问生成的dom节点。
但是，它只能处理有效的 html 节点，即标准 html 结构中合法的元素。例如，如果您尝试将
元素插入 ，则不会创建该节点。
此外，该方法不会执行html字符串中的任何脚本，这在处理不受信任的内容时更安全。
立即学习“前端免费学习笔记（深入）”；
innerhtml + 模板元素
const template = document.createelement('template');template.innerhtml = `hello world`;const node = template.content.firstelementchild;
登录后复制
使用 标签的优点是没有内容限制，可以包含任何类型的 html 结构，包括 和 等与表格相关的元素。
插入相邻html
const container = document.createelement("div");container.insertadjacenthtml("afterbegin", `hello world`);const node = container.firstelementchild;
登录后复制
该方法与innerhtml类似，只能处理有效的html节点。它也不会执行脚本。
dom解析器
const node = new domparser().parsefromstring(`hello world`, "text/html").body.firstelementchild;
登录后复制
该方法通过创建完整的 html 文档来解析字符串，然后从文档中提取节点。这意味着它比其他解决方案相对慢，不建议使用。
它只能处理有效的 html 节点，不会执行脚本。
range.createcontextualfragment
const node = document.createRange().createContextualFragment(`Hello World`).firstElementChild;
登录后复制
这个方法可能是最简单的。默认情况下它也只能处理有效的 html 节点。但是，我们可以设置上下文来避免这种情况。
请注意，它会执行 html 字符串中的脚本，因此在处理不受信任的内容时要特别小心，例如使用 dompurify 等清理器。
结论
针对不同的情况，您可能需要选择最适合您的方法。
如果您觉得我的内容有帮助，请考虑订阅。我每天发送一份时事通讯，其中包含最新的网络开发更新。感谢您的支持！
以上就是如何从 HTML 字符串创建 DOM 元素（多种方法）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2672193.html
