JavaScript textContent 与 innerHTML 的区别

textContent 和 innerHTML 是 JavaScript 的属性。然而，在处理指定的文本时存在一些差异。让我们来看一下这两个属性的语法。

语法：

假设 elem 是一个 JavaScript 变量，它持有页面上被选中的元素。

let elem = document.getElementById('test-btn');

textContent和innerHTML属性可以按照以下方式使用：

textContent属性： 该属性用于获取或设置指定节点及其子节点的文本内容。

elem.textContent

innerHTML属性： 此属性用于获取或设置元素的HTML内容。

elem.innerHTML

示例：

此示例展示了DOM的innerHTML和textContent属性之间的区别。

<body style="text-align:center;">
    <h1 style="color:#006600">
        GeeksforGeeks
    </h1>
 
    <div id="test-btn">
        The following element contains some
        <bold>bold</bold> and
        some <italic>italic text</italic>.
    </div>
 
    <p></p>
 
    <button onClick="innerHTMLfn()">
        innerHTML
    </button>
 
    <button onClick="textContentfn()">
        textContent
    </button>
 
    <p id="demo-para"></p>
 
    <script>
        function textContentfn() {
            var elem =
                document.getElementById('test-btn');
            alert(elem.textContent);
        }
         
        function innerHTMLfn() {
            var elem =
                document.getElementById('test-btn');
            alert(elem.innerHTML);
        } 
    </script>
</body>

输出：

JavaScript textContent 与 innerHTML 的区别