您的位置：首页 > Web前端 > HTML

innerText 与 innerHtml的区别 （一）

2016-09-16 23:33 246 查看
innerText  与 innerHtml 都是打印标签之间的文本信息

1、innerText
打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>这是P标签</p>
<p>这是P标签</p>
<p>这是P标签</p>
</div>
</body>

<script>
var box = document.getElementById("box");
//打印标签之间的纯文本信息，会将标签过滤掉
var str = box.innerText;
console.log(str);
</script>
</html>

打印结果是

这是P标签

这是P标签

这是P标签


2、innerHtml 打印标签之间的内容，包括标签和文本信息，各浏览器都支持，但是高版本的浏览器会原样打印
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>这是P标签</p>
<p>这是P标签</p>
<p>这是P标签</p>
</div>
</body>

<script>
var box = document.getElementById("box");
//打印标签之间的内容，包括标签和文本信息
var str = box.innerHTML;
console.log(str);
</script>
</html>
打印结果是
<p>这是P标签</p>
<p>这是P标签</p>
<p>这是P标签</p>

如果将div中的p标签不换行，打印的结果会原样输出
<div id="box">
<p>这是P标签</p>
<p>这是P标签</p><p>这是P标签</p>
</div>
打印结果是
<p>这是P标签</p>
<p>这是P标签</p><p>这是P标签</p>


但是使用innerText 会有兼容性，低版本的火狐浏览器不支持使用，而是支持使用textContent，因此我们需要封装一个兼容版本，以及调用方法
<pre class="html" name="code">// 获取标签的对象
var box = document.getElementById("box");
// 调用方法
var str = getText(box);
console.log(str);
/**
* 封装了一个获取标签之间的文本信息兼容版本函数
* @param element 标签对象
* @returns {*}
*/
function getText(element) {
if(element.innerText) {
return element.innerText; //IE8及之前的浏览器支持，现在两者都支持
}else {
return element.textContent; //低版本的火狐支持
}
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                innerText
                                                innerHtml
                                                textContent
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航