1、提出問(wèn)題

涉及元素節(jié)點(diǎn)內(nèi)容讀取或修改的時(shí)候，有三個(gè)屬性可供選擇innerHTML，innerText,textContent。

那么這三個(gè)屬性各有什么不同，又分別適用于什么情況。

受 這個(gè)說(shuō)明啟發(fā)，我寫了個(gè)簡(jiǎn)單的例子比較了三者的不同。

2、開始實(shí)驗(yàn)

一段簡(jiǎn)單的HTML代碼:

<div id="source">
    <style>
        .upper-case {
            text-transform: uppercase;
        }
        .hidden {
            display: none;
        }
    </style>
    <div>
        a <span class="upper-case">simple</span> text.
        <span class="hidden"> a hidden text.</span>
    </div>
</div>
<div id="innerHTML"></div>
<div id="innerText"></div>
<div id="textContent"></div>
<script>
    let source = document.getElementById("source");
    function trans(which) {
        let str = source[which];
        console.log(str);
        document.getElementById(which)[which] = str;
    }
    trans("innerHTML");
    trans("innerText");
    trans("textContent");
</script>

3、記錄數(shù)據(jù)

結(jié)果頁(yè)面：

控制臺(tái)輸出：

• innerHTML:

    <style>
        .upper-case {
            text-transform: uppercase;
        }
        .hidden {
            display: none;
        }
    </style>
    <div>
        a <span class="upper-case">simple</span> text.
        <span class="hidden"> a hidden text.</span>
    </div>

• innerText:

a SIMPLE text.

• textContent:

        .upper-case {
            text-transform: uppercase;
        }
        .hidden {
            display: none;
        }
        a simple text.
         a hidden text.

4、分析結(jié)果

從頁(yè)面結(jié)果和控制臺(tái)的結(jié)果來(lái)看：

• innerHTML: 返回的是文檔中元素內(nèi)的HTML片段，在設(shè)置時(shí)，HTML片段會(huì)進(jìn)過(guò)解析。
• innerText: 返回的是渲染結(jié)果（頁(yè)面呈現(xiàn)結(jié)果）的文本內(nèi)容。
• textContent: 返回結(jié)果去除了內(nèi)部（包括嵌套節(jié)點(diǎn)）標(biāo)簽及其屬性，保留了內(nèi)部的文本內(nèi)容。
• innerText和textContent被設(shè)置時(shí)以安全方式（不會(huì)引起文檔結(jié)構(gòu)變化）寫入。

5、得出結(jié)論

• 想獲得元素內(nèi)的html內(nèi)容或設(shè)置其內(nèi)部HTML，使用innerHTML。
• 想獲得元素的文本內(nèi)容或設(shè)置其文本內(nèi)容，使用textContent。
• （很少使用）如果獲取在頁(yè)面呈現(xiàn)的文本內(nèi)容，使用innerText。

事實(shí)上，很多時(shí)候，尤其是元素內(nèi)部只是普通文本的時(shí)候，三者的區(qū)別不會(huì)造成什么問(wèn)題，所以很多人對(duì)它們的區(qū)別不清楚。

不過(guò)，我認(rèn)為，至少應(yīng)該記?。涸谏婕癏TML內(nèi)容時(shí)，必須使用innerHTML；否則，使用textContent，保證安全。 使用innerText往往是為了兼容IE6-7。

以上就是innerHTML innerText textContent使用區(qū)別示例詳解的詳細(xì)內(nèi)容，更多關(guān)于innerHTML innerText textContent的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論