我要投稿

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

资讯主编 HTML

2024-08-05 0 1,052

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

内部html

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

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

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

元素插入

，则不会创建该节点。

此外，该方法不会执行html字符串中的任何脚本，这在处理不受信任的内容时更安全。

立即学习“前端免费学习笔记（深入）”；

innerhtml + 模板元素

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

使用

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

免责声明
1. 本站所有资源来源于用户上传和网络等，如有侵权请邮件联系本站整改team@lcwl.fun！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系本站工作人员处理！
6. 本站资源售价或VIP只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压，如遇到无法解压的请联系管理员！
8. 因人力时间成本问题，部分源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！
9.本站所有源码资源都是经过本站工作人员人工亲测可搭建的，保证每个源码都可以正常搭建，但不保证源码内功能都完全可用，源码属于可复制的产品，无任何理由退款！

网站搭建学习网 HTML 如何从 HTML 字符串创建 DOM 元素（多种方法） https://www.xuezuoweb.com/8961.html