innerHTML
Element.innertHTML
设置和获取元素的HTML
innerHTML 元素内部的所有内容都会被删除
outerHTML 替换包含父元素的所有内容
获取源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="wrapper"></div>
<script>
var oWrapper = document.getElementById('wrapper');
var code = document.documentElement.innerHTML.replace(/</g, '<');
document.documentElement.innerHTML = '<pre>' + code + '<pre>';
console.log(code);
</script>
</body>
</html>
设置innerHTML发生了什么?
- innerHTML = ‘
123
’ 123
解析为HTML文档结构- 用DocumentFlagment将之歌HTML文档结构变成DOM节点
- 源本父节点上的所有内容都会替换成这个DOM节点
安全问题
新的浏览器和HTML5都会阻止这种通过innerHTML嵌入script脚本的程序执行
a = ‘’
纯文本的时候 不要使用innerHTML
推荐使用textContent
dom节点的引用会在追加html字符串之后被破坏
var oText = document.getElementById('text);
oWrapper.innerHTML += '<h1>123</h1>'
oText.style.color = 'red'
会报错
textContent
在Node.prototype上
它只会将文本插入到元素内部去
不会成为一个dom的元素节点 只会成为文本节点
innerText
在HTMLElement.prototype上
给元素渲染文本节点
oWrapper.innerText = '<h1>123</h1>';
oWrapper.textContent = '<h1>123</h1>';
textContent与innerText区别
textContent获取所有元素的内容 script style
innerText只会获取给人看的所有内容
innerText会受到css的影响 reflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="wrapper">
<h1>这是标题</h1>
<p class="content">
<style>
.content {
color: orange;
}
</style>
</p>
这是文章内容
<br />
这是文章内容
<br />
这是文章内容
<br />
这是文章内容
<span style="display: none">这是隐藏内容</span>
</div>
<textarea id="oInnerText"></textarea>
<textarea id="oTextContent"></textarea>
<script>
var oWrapper = document.getElementById('wrapper');
var oInnerText = document.getElementById('oInnerText');
var oTextContent = document.getElementById('oTextContent');
oInnerText.innerHTML = oWrapper.innerText;
oTextContent.innerHTML = oWrapper.textContent;
</script>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看