innerHTML innerText textContent使用區別示例詳解

Posted on by

1、提出問題

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

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

受 這個說明啟發，我寫瞭個簡單的例子比較瞭三者的不同。

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、記錄數據

結果頁面：

控制臺輸出：

  • 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、分析結果

從頁面結果和控制臺的結果來看：

  • innerHTML: 返回的是文檔中元素內的HTML片段，在設置時，HTML片段會進過解析。
  • innerText: 返回的是渲染結果（頁面呈現結果）的文本內容。
  • textContent: 返回結果去除瞭內部（包括嵌套節點）標簽及其屬性，保留瞭內部的文本內容。
  • innerText和textContent被設置時以安全方式（不會引起文檔結構變化）寫入。

5、得出結論

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

事實上，很多時候，尤其是元素內部隻是普通文本的時候，三者的區別不會造成什麼問題，所以很多人對它們的區別不清楚。

不過，我認為，至少應該記住：在涉及HTML內容時，必須使用innerHTML；否則，使用textContent，保證安全。 使用innerText往往是為瞭兼容IE6-7。

以上就是innerHTML innerText textContent使用區別示例詳解的詳細內容，更多關於innerHTML innerText textContent的資料請關註WalkonNet其它相關文章！

推薦閱讀：