innerHTML和innertext的区别

最新推荐文章于 2022-04-22 10:02:30 发布

原创最新推荐文章于 2022-04-22 10:02:30 发布 · 643 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #web #标签

web，HTML5 专栏收录该内容

2 篇文章

订阅专栏

本文通过一个具体的HTML示例，详细对比了innerHTML与innerText在获取页面元素内容时的不同表现。innerHTML可以获取包括子标签在内的所有内容，而innerText仅获取纯文本信息。

innerHTML和innertext的区别很容易区分，那什么时候用innerHTML，innertext呢。

innerHTML获取的是标签的内容。而innertext获取的是标签的节点。

我们来举个例子。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>书上有路勤为径</li>
		<li>学海无涯乐作舟
			<div>一定要快乐</div>
		</li>
	</ul>
	<script type="text/javascript">
	     // 获取第二句
	     var liobj = document.getElementsByTagName("li")[1];
	     //  innerText
	     var content1 = liobj.innerHTML;//学海无涯乐作舟<div>一定要快乐</div>，获取li内容
		 var content2 = liobj.innerText;//学海无涯苦做州，一定要快乐,获取li的节点	
		
	    
	     console.log(content1);
	     console.log(content2);
	</script>
</body>
</html>

查看结果：