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").onclick=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>
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").onclick=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>