js中textContent、innerText和innerHTML的用法以及区别

更新时间：2023年05月15日 23:40:21 作者：码仙

这篇文章主要介绍了JavaScript中textContent、innerText和innerHTML的用法以及区别,需要的朋友可以参考下

一.textContent的用法

1.设置标签中的文本内容

<body>
<input type="button" value="按钮" id="btn">
<div id="dv">这是一个div</div>
<script>
    document.getElementById("btn").onclick = function () {
        document.getElementById("dv").textContent = "改变了";
    };
</script>
</body>

2.获取标签中的文本内容

<body>
<input type="button" value="按钮" id="btn">
<div id="dv">这是一个div</div>
<script>
    document.getElementById("btn").onclick = function () {
        var text = document.getElementById("dv").textContent;
        console.log(text);
    };
</script>
</body>

二.innerText的用法

1.设置标签中的文本内容

<body>
<input type="button" value="按钮" id="btn">
<div id="dv">这是一个div</div>
<script>
    document.getElementById("btn").onclick = function () {
        document.getElementById("dv").innerText = "改变了";
    };
</script>
</body>

2.获取标签中的文本内容

<body>
<input type="button" value="按钮" id="btn">
<div id="dv">这是一个div</div>
<script>
    document.getElementById("btn").onclick = function () {
        var text = document.getElementById("dv").innerText;
        console.log(text);
    };
</script>
</body>

三.innerHTML的用法 1.设置标签中的文本内容

1.设置标签中的文本内容

<body>
<input type="button" value="按钮" id="btn">
<div id="dv">这是一个div</div>
<script>
    document.getElementById("btn").onclick = function () {
        document.getElementById("dv").innerHTML = "改变了";
    };
</script>
</body>

2.获取标签中的文本内容

<body>
<input type="button" value="按钮" id="btn">
<div id="dv">这是一个div</div>
<script>
    document.getElementById("btn").onclick = function () {
        var text = document.getElementById("dv").innerHTML;
        console.log(text);
    };
</script>
</body>

四.innerText和textContent的区别

设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
判断这个属性的类型是不是undefined,就知道浏览器是否支持

1.兼容代码设置任意的标签中间的任意文本内容

<script>
    function setInnerText(element, text) {
        //判断浏览器是否支持这个属性
        if (typeof element.textContent == "undefined") {//不支持
            element.innerText = text;
        } else {//支持这个属性
            element.textContent = text;
        }
    };
</script>

2.兼容代码获取任意标签中间的文本内容

<script>
    function getInnerText(element) {
        if (typeof element.textContent == "undefined") {
            return element.innerText;
        } else {
            return element.textContent;
        }
    };
</script>

五.textContent、innerText和innerHTML的区别

textContent、innerText的效果是一样的，所以这里我只用innerText举例

1.设置标签中的文本内容

innerText的效果

<body>
<input type="button" value="按钮" id="btn">
<div id="dv">这是一个div</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    };
</script>
<script>
    my$("btn").onclick = function () {
        my$("dv").innerText = "哈哈";//设置文本
        my$("dv").innerText = "<p>这是一个p</p>";//设置html标签的代码
    };
</script>
</body>

innerHTML的效果

<body>
<input type="button" value="按钮" id="btn">
<div id="dv">这是一个div</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    };
</script>
<script>
    my$("btn").onclick = function () {
        my$("dv").innerHTML = "哈哈";
        my$("dv").innerHTML = "<p>这是一个p</p>";//设置Html标签的
    };
</script>
</body>

2.获取标签中的文本内容

innerText的效果

<body>
<input type="button" value="按钮" id="btn">
<div id="dv">
    <p>这是一个p</p>
</div>
<script>
    document.getElementById("btn").onclick = function () {
        //可以获取标签中的文本内容
        console.log(document.getElementById("dv").innerText);
    };
</script>
</body>

innerHTML的效果

3.总结

如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML
innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取
innerHTML才是真正的获取标签中间的所有内容

本篇博客来自于传智播客视频教程的总结以及笔记的整理，仅供学习交流，切勿用于商业用途

您可能感兴趣的文章:

js中innerText/textContent和innerHTML与target和currentTarget的区别

基于javascript实现全屏漂浮广告
这篇文章主要介绍了基于javascript实现全屏漂浮广告，光标悬浮广告停止移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-03-03
JavaScript Chart 插件整理
前段时间由于工作关系，查找了一些JS的chart插件，以下数据采集于2010.4.8。
2010-06-06
微信小程序picker组件两列关联使用方式
这篇文章主要介绍了微信小程序picker组件两列关联使用方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10
javascript数组中的findIndex方法
这篇文章主要介绍了javascript数组中的findIndex方法，findIndex() 方法返回传入一个测试条件函数符合条件的数组第一个元素位置，下面更多相关资料，需要的小伙伴可以参考一下
2022-03-03
深入理解令牌认证机制（token）
这篇文章主要介绍了深入理解令牌认证机制（token），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
js不间断滚动的简单实现
下面小编就为大家带来一篇js不间断滚动的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
JavaScript数学对象(Math)方法举例详解
这篇文章主要给大家介绍了关于JavaScript数学对象(Math)方法的相关资料,Math(数学)对象的作用是执行普通的算数任务,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-03-03
JavaScript中常见的继承方式总结
这篇文章主要和大家详细介绍了JavaScript中常见的几种继承方式，文中的示例代码讲解详细，对我们学习JavaScript有一定帮助，需要的小伙伴可以参考下面文章详细内容
2022-11-11
Javascript 写的简单进度条控件
2008-01-01
JavaScript对象数组如何按指定属性和排序方向进行排序
这篇文章主要介绍了JavaScript对象数组如何按指定属性和排序方向进行排序的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06