innerText和innerHTML之间的区别是什么?

innerText和 innerHTML都是JavaScript的属性;但处理文本存在差异。下面本篇文章就来给大家介绍一下innerText和innerHTML之间的区别,希望对大家有所帮助。

先让我们检查两者的语法,然后举一个例子来看看差异。

语法:

假设我们有一个名为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之间的区别是什么?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏