innerText和innerHTML区别

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>

猜你喜欢

转载自blog.csdn.net/przlovecsdn/article/details/65449850