innerHTML innerText textContent使用區(qū)別示例詳解

更新時間：2022年11月11日 14:31:33 作者：czpcalm

這篇文章主要為大家介紹了innerHTML innerText textContent使用區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

1、提出問題

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

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

受這個說明啟發(fā)，我寫了個簡單的例子比較了三者的不同。

2、開始實驗

一段簡單的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ù)

結果頁面：

控制臺輸出：

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.