innerText和innerHTML区别-CSDN博客

本文链接：https://blog.csdn.net/przlovecsdn/article/details/65449850

1、innerText:可以设置和获取元素的文本内容(基本标签,成对的html标签)(谷歌,火狐,IE8都支持)
2、innerHTML:可以设置和获取元素的标签+文本内容(元素中的文本内容也可以使用该属性设置和获取)
3、如果是设置元素的文字内容可以使用innerText,也可以使用innerHTML
4、如果是设置元素中:标签和文字内容,推荐用innerHTML
5、如果是获取元素中的单纯的文字内容:使用innerText
6、如果是获取元素中的标签+文字内容:使用innerHTML

举例：
<style>
div{
width: 200px;
height: 100px;
border:2px solid red;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv">
<p>这是一个p</p>
</div>

<script>
function my$(id){
return document.getElementById(id);
}
my$("btn").οnclick=function () {
my$("dv").innerText="<p>这是一个p标签</p>";//在div显示的是：<p>这是一个p标签</p>

my$("dv").innerHTML="<p>这是一个p标签</p>";//在div显示的是：这是一个p标签

console.log(my$("dv").innerText);//获取的只是文字,没有标签，获取的是：这是一个p

console.log(my$("dv").innerHTML);//获取div中的标签+文字内容，获取的是：<p>这是一个p</p>
}
</script>