innerText和 innerHTML都是JavaScript的属性，但在处理文本上存在差异。下面本篇文章就来给大家介绍一下innerText和innerHTML之间的区别，希望对大家有所帮助。
image
先让我们检查两者的语法，然后举一个例子来看看差异。
语法：
假设我们有一个名为x的JavaScript变量。
var x = document.getElementById('test');
下面是如何在这个变量上使用innerText和innerHTML。
● innerText
x.innerText
● innerHTML
x.innerHTML
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="text-align:center;">
<div id="test">这是一段包含一些
<codes>代码</codes>和
<italic>文本</italic>！
</div>
<p></p>
<button onClick="innerTextFn()">innerHTML</button>
<button onClick="innerHTMLFn()">innerText</button>
<p id="op"></p>
<script>
function innerTextFn() {
var x = document.getElementById('test');
alert(x.innerText);
}
function innerHTMLFn() {
var x = document.getElementById('test');
alert(x.innerHTML);
}
</script>
</body>
</html>
点击之前：
f3960bc7f107d83b4a8b35493042d62.png
点击innerHTML后：
07d9ed31c74053771c2e0858e65d339.png
点击innerText后：
4489e8a4e9852f53eaae96e960c203f.png
区别：
从上面的示例中可以看到，innerText属性将文本内容设置或返回为指定节点及其所有子节点的纯文本，而innerHTML属性将获取和设置元素中的纯文本或HTML内容。与InnerText不同，InnerHTML允许您使用HTML格式的文本，并且不会自动对文本进行编码和解码。
原文地址：innerText和innerHTML之间的区别是什么？
