innerHTML ，innerText与textContent对比

最新推荐文章于 2022-07-07 20:13:38 发布

Chen_Devin

最新推荐文章于 2022-07-07 20:13:38 发布

阅读量505

点赞数

分类专栏：每周学习 web前端基础文章标签： js设置和获取标签内容 innerHTML textContent innerText innerHTML与innerText对比

本文链接：https://blog.csdn.net/lily__an/article/details/103784095

版权

web前端基础同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

每周学习

22 篇文章 0 订阅

订阅专栏

innerHTML ，innerText，textContent对比

innerHTML

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

语法： HTMLElementObject.innerHTML=text


<body>
    <div>
        <span>
            <span> 武林至尊，宝刀屠龙，号令天下，谁敢不从！</span>
            <div>倚天不出，谁与争锋；</div>
        </span>
        <br>
        <input type="button" value="点击html" onclick="htmlGetClick()">
        <input type="button" value="设置html" onclick="htmlSetClick()">
    </div>
</body>
</html>
<script>
    var spanArr = document.getElementsByTagName("span")
    function htmlGetClick(){
        var inHtml = spanArr[0].innerHTML;
        console.log(inHtml); 

        // <span> 武林至尊，宝刀屠龙，号令天下，谁敢不从！</span>
        // <div>倚天不出，谁与争锋；</div>
    }
    function htmlSetClick(){
        spanArr[0].innerHTML = "人间绝品应难识，闲对茶经忆友人<br>一杯永日醒双眼，草木英华信有神";

        // 人间绝品应难识，闲对茶经忆友人
        // 一杯永日醒双眼，草木英华信有神
    }
</script>

innerText

var renderedText = HTMLElement.innerText;

HTMLElement.innerText = string;

<body>
    <div>
        <span>
            <span> 武林至尊，宝刀屠龙，号令天下，谁敢不从！</span>
            <div>倚天不出，谁与争锋；</div>
        </span>
        <br>
        <input type="button" value="点击text" onclick="textGetClick()">
        <input type="button" value="设置text" onclick="textSetClick()">
    </div>
</body>
</html>
<script>
    var spanArr = document.getElementsByTagName("span")

    function textGetClick(){
        var inText = spanArr[0].innerText;
        console.log(inText); 

        // 武林至尊，宝刀屠龙，号令天下，谁敢不从！
        // 倚天不出，谁与争锋；
    }
    function textSetClick(){
        spanArr[0].innerText = "人间绝品应难识，闲对茶经忆友人<br>一杯永日醒双眼，草木英华信有神";

        //人间绝品应难识，闲对茶经忆友人<br>一杯永日醒双眼，草木英华信有神
    }
</script>

textContent

textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。

如果您设置了 textContent 属性，会删除所有子节点，并被替换为包含指定字符串的一个单独的文本节点。

提示：有时，此属性可用于取代 nodeValue 属性，但是请记住此属性同时会返回所有子节点的文本。

<body>
    <div>
        <span>
            <span> 武林至尊，宝刀屠龙，号令天下，谁敢不从！</span>
            <div>倚天不出，谁与争锋；</div>
        </span>
        <br>
        <input type="button" value="点击content" onclick="contentGetClick()">
        <input type="button" value="设置content" onclick="contentSetClick()">
    </div>
</body>
</html>
<script>
    var spanArr = document.getElementsByTagName("span")

    function contentGetClick(){
        var inText = spanArr[0].textContent;
        console.log(inText); 
        
        // 武林至尊，宝刀屠龙，号令天下，谁敢不从！
        // 倚天不出，谁与争锋；
    }
    function contentSetClick(){
        spanArr[0].textContent = "人间绝品应难识，闲对茶经忆友人<br>一杯永日醒双眼，草木英华信有神";
        
        // 人间绝品应难识，闲对茶经忆友人<br>一杯永日醒双眼，草木英华信有神
    }
</script>

区别整理

innerText与textContent效果相同，可以设置文本的,标签内容,是没有标签的效果的；
innerHTML可以设置标签内容，且标签保护效果；
innerText与textContent效果相同，可以获取标签内容,且可以获取标签内容中的标签；
innerHTML才是真正的获取标签中间的所有内容

innerText/textContent的用法总结：

innerText可以获取标签间的内容，如果标签间只有文本的话，则是直接获取，如果标签间还有嵌套标签的话，则会将嵌套标签忽略掉
在给标签设置内容的时候，如果是纯文本内容的话，则直接设置，如果设置的内容里面，有标签的话，则会将标签进行转义
innerText是低版本的火狐浏览器不支持,高版本的火狐浏览器，两个属性都支持，而IE8及之前的浏览器只支持 innerText不支持textContent

innerHTML用法的总结：

使用innerHTML来获取标签间内容的时候，如果标签间是纯文本内容的话，则是直接获取，如果标签间间有嵌套标签的话，则会将标签一并获取
给标签设置内容的时候，如果设置的内容是纯文本的话，则是直接设置，如果设置的内容里面，有嵌套标签的话，则会将标签在浏览器中渲染出来
没有兼容性的问题各浏览器都支持

Chen_Devin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
innerHTML ，innerText与textContent对比

innerHTML ，innerText，textContent对比 innerHTML innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。语法： HTMLElementObject.innerHTML=text<body> <div> <span> <spa...
复制链接

扫一扫