热门标签
热门文章
- 1GPT的发展
- 2【学习笔记】正确写作美国大学生数学建模竞赛论文（已获得国二、美O）
- 3提升Spring Boot程序启动速度的七大优化技巧_springboot启动速度优化
- 4使用adb时，mac电脑提示：“adb: protocol fault (couldn‘t read status): Connection reset by peer”怎么办_adb: failed to run abb_exec. error: protocol fault
- 5nvidia驱动安装 "Building Nvidia-uvm kernel fialed"问题解决_error: the nvidia-uvm kernel module was not create
- 6（源码+讲解+部署）基于Spring Boot和Vue的考研教育系统的设计与实现
- 7字节跳动2022校招研发提前批宣讲会，同学们最关心的10个问题
- 8Android基础：数据存储(一)：文件存储的工具类UtilsFile_android 文件保存util
- 9离散数学复习笔记（已完结）_离散数学笔记
- 10word2vec模型训练保存加载及简单使用_biowordvec预训练词典如何加载使用?
当前位置: article > 正文
HTML字符转DOM方法_html字符串转dom
作者：小丑西瓜9 | 2024-04-10 05:03:23
赞
踩
html字符串转dom
前言
html字符串转dom的场景一般很少，也不推荐做这种危险操作，容易被XSS攻击，如果有需要按需使用
具体方式
| 方法 | 示例 | 安全性 | 任意节点 | 兼容性 |
|---|---|---|---|---|
| innerHTML | let html = '文本元素';
let placeholder = document.createElement('div');
placeholder.innerHTML = html;
let nodes = placeholder.childNodes;
| script 脚本不会执行 | 不合法的节点无法转换，如p标签内使用div标签 使用template元素可绕过此限制 | IE6+ |
| insertAdjacentHTML | let html = '元素';
let placeholder = document.createElement('div');
placeholder.insertAdjacentHTML('afterbegin', html);
// 如果HTML是单个闭合HTML标签
// 可以直接使用firstElementChild直接返回
let node = placeholder.firstElementChild;
| script 脚本不会执行 | 不合法的节点无法转换 该方法可指定HTML字符插入为主 | IE6+支持，IE10-不支持table相关的标签，例如tr, td, thead等元素 |
| DOMParser | new DOMParser().parseFromString(html, 'text/html')
| script 脚本不会执行 | 可以作为body子元素的标签才能解析，如tr元素无法被解析 | IE 10+, Safari 9.1+ |
| setRange | document.createRange().createContextualFragment(html).children
| script 脚本会执行 | 需要制定上下文 | IE 10+, Safari 9+ |
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/396738
推荐阅读
- ...
赞
踩
相关标签
