快捷導(dǎo)航

js中textContent、innerText和innerHTML的用法以及區(qū)別

更新時(shí)間：2023年05月15日 23:40:21 作者：碼仙

這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下

一.textContent的用法

1.設(shè)置標(biāo)簽中的文本內(nèi)容

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個(gè)div</div>
<script>
    document.getElementById("btn").onclick = function () {
        document.getElementById("dv").textContent = "改變了";
    };
</script>
</body>

2.獲取標(biāo)簽中的文本內(nèi)容

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

二.innerText的用法

1.設(shè)置標(biāo)簽中的文本內(nèi)容

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個(gè)div</div>
<script>
    document.getElementById("btn").onclick = function () {
        document.getElementById("dv").innerText = "改變了";
    };
</script>
</body>

2.獲取標(biāo)簽中的文本內(nèi)容

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

三.innerHTML的用法 1.設(shè)置標(biāo)簽中的文本內(nèi)容

1.設(shè)置標(biāo)簽中的文本內(nèi)容

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個(gè)div</div>
<script>
    document.getElementById("btn").onclick = function () {
        document.getElementById("dv").innerHTML = "改變了";
    };
</script>
</body>

2.獲取標(biāo)簽中的文本內(nèi)容

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

四.innerText和textContent的區(qū)別

設(shè)置標(biāo)簽中的文本內(nèi)容,應(yīng)該使用textContent屬性,谷歌,火狐支持,IE8不支持
設(shè)置標(biāo)簽中的文本內(nèi)容,應(yīng)該使用innerText屬性,谷歌,火狐,IE8都支持
如果這個(gè)屬性在瀏覽器中不支持,那么這個(gè)屬性的類(lèi)型是undefined
判斷這個(gè)屬性的類(lèi)型是不是undefined,就知道瀏覽器是否支持

1.兼容代碼設(shè)置任意的標(biāo)簽中間的任意文本內(nèi)容

<script>
    function setInnerText(element, text) {
        //判斷瀏覽器是否支持這個(gè)屬性
        if (typeof element.textContent == "undefined") {//不支持
            element.innerText = text;
        } else {//支持這個(gè)屬性
            element.textContent = text;
        }
    };
</script>

2.兼容代碼獲取任意標(biāo)簽中間的文本內(nèi)容

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

五.textContent、innerText和innerHTML的區(qū)別

textContent、innerText的效果是一樣的，所以這里我只用innerText舉例

1.設(shè)置標(biāo)簽中的文本內(nèi)容

innerText的效果

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個(gè)div</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    };
</script>
<script>
    my$("btn").onclick = function () {
        my$("dv").innerText = "哈哈";//設(shè)置文本
        my$("dv").innerText = "<p>這是一個(gè)p</p>";//設(shè)置html標(biāo)簽的代碼
    };
</script>
</body>

innerHTML的效果

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個(gè)div</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    };
</script>
<script>
    my$("btn").onclick = function () {
        my$("dv").innerHTML = "哈哈";
        my$("dv").innerHTML = "<p>這是一個(gè)p</p>";//設(shè)置Html標(biāo)簽的
    };
</script>
</body>

2.獲取標(biāo)簽中的文本內(nèi)容

innerText的效果

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">
    <p>這是一個(gè)p</p>
</div>
<script>
    document.getElementById("btn").onclick = function () {
        //可以獲取標(biāo)簽中的文本內(nèi)容
        console.log(document.getElementById("dv").innerText);
    };
</script>
</body>

innerHTML的效果

3.總結(jié)

如果使用innerText主要是設(shè)置文本的,設(shè)置標(biāo)簽內(nèi)容,是沒(méi)有標(biāo)簽的效果的
innerHTML是可以設(shè)置文本內(nèi)容
innerHTML主要的作用是在標(biāo)簽中設(shè)置新的html標(biāo)簽內(nèi)容,是有標(biāo)簽效果的
想要設(shè)置標(biāo)簽內(nèi)容,使用innerHTML,想要設(shè)置文本內(nèi)容,innerText或者textContent,或者innerHTML,推薦用innerHTML
innerText可以獲取標(biāo)簽中間的文本內(nèi)容,但是標(biāo)簽中如果還有標(biāo)簽,那么最里面的標(biāo)簽的文本內(nèi)容也能獲取.---獲取不到標(biāo)簽的,文本可以獲取
innerHTML才是真正的獲取標(biāo)簽中間的所有內(nèi)容

本篇博客來(lái)自于傳智播客視頻教程的總結(jié)以及筆記的整理，僅供學(xué)習(xí)交流，切勿用于商業(yè)用途

您可能感興趣的文章:

js中innerText/textContent和innerHTML與target和currentTarget的區(qū)別

相關(guān)文章

js 獲取class的元素的方法以及創(chuàng)建方法getElementsByClassName
js 獲取class的元素的方法以及創(chuàng)建方法getElementsByClassName，需要的朋友可以參考一下
2013-03-03
利用JavaScript的%做隔行換色的實(shí)例
下面小編就為大家分享一篇利用JavaScript的%做隔行換色的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)變換元素樣式的技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-09-09
JavaScript獲取某年某月的最后一天附截圖
這篇文章主要介紹了JavaScript如何獲取某年某月的最后一天，需要的朋友可以參考下
2014-06-06
原生態(tài)js,鼠標(biāo)按下后,經(jīng)過(guò)了那些單元格的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇原生態(tài)js,鼠標(biāo)按下后,經(jīng)過(guò)了那些單元格的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
JavaScript箭頭函數(shù)中的this詳解
這篇文章主要介紹了JavaScript箭頭函數(shù)中的this詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下
2019-06-06
JS實(shí)現(xiàn)顯示帶倒影的圖片橫排居中放大展示特效實(shí)例【測(cè)試可用】
這篇文章主要介紹了JS實(shí)現(xiàn)顯示帶倒影的圖片橫排居中放大展示功能,可實(shí)現(xiàn)點(diǎn)擊圖片及點(diǎn)擊左右按鈕滑動(dòng)切換的效果,涉及javascript針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-08-08
這篇文章主要介紹了JS判斷兩個(gè)數(shù)組或?qū)ο笫欠裣嗤姆椒?結(jié)合實(shí)例形式分析了javascript針對(duì)簡(jiǎn)單數(shù)組與對(duì)象進(jìn)行判斷的相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02