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+