前言
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+ |
