【JavaScript DOM】innerHTML、innerText

innerHTML

• Element.innerHTML

显示HTML源码

var code = document.documentElement.innerHTML.replace(/</g, '&lt;');
document.documentElement.innerHTML = '<pre>' + code + '</pre>';
console.log(code);

设置innerHTML发生了什么

1. 例如innerHTML = `<h1>123</h1>`
2. `<h1>123</h1>`解析为HTML文档结构
2. 用DocumentFragment将这个HTML文档结构变成DOM节点
3. 原本父节点上的所有内容都会被替换成这个DOM节点

安全问题

• HTML5和现代浏览器都会阻止这种通过innerHTML嵌入script脚本的程序行为

1. 插入纯文本的时候，不用innerHTML，用Node.textContent（只会将文本插入到元素内部去）
2. innerHTML +=的时候，会破坏该节点的引用
3. 有createElement创建的元素我们可以使用innerHTML，这样不会影响document文档

innerText

• HTMLElement.innerText

• 只会获取给人看的内容

• 会收到css的影响，会导致回流，重新计算样式

textContent

• 会获取script跟style标签内容