JavaScript innerHTML 和 textContent

在 JavaScript DOM 操作中，我们经常需要获取或修改 HTML 元素内部的内容，此时可以考虑使用 innerHTML 和 textContent 来实现。

JavaScript innerHTML

在 JavaScript 中，我们可以使用 DOM 对象的 innerHTML 属性来 “获取” 或 “设置” 某个元素内部的 “所有内容（包括 HTML 结构）” 。

注意，innerHTML 是 DOM 对象的一个属性。也就是说，我们首先需要使用 document.Xxx() 方法来获取到一个 DOM 对象，然后才能使用 innerHTML 属性。

示例 1：获取 innerHTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p id="content"><strong style="color:hotpink;">绿叶网</strong></p>
    <p><button id="btn">获取</button></p>
    <script>
        const oP = document.getElementById("content");
        const oBtn = document.getElementById("btn");

        oBtn.onclick = function() {
            console.log(oP.innerHTML);
        };
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript 获取 innerHTML

分析：

当我们点击【获取】按钮之后，浏览器控制台输出结果如下：

<strong style="color:hotpink;">绿叶网</strong>

其中，使用 innerHTML 可以获取元素内部所有的内容，包括标签和文本。

示例 2：设置 innerHTML

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p id="content"><strong style="color:hotpink;">绿叶网</strong></p>
    <p><button id="btn">设置</button></p>
    <script>
        const oP = document.getElementById("content");
        const oBtn = document.getElementById("btn");

        oBtn.onclick = function() {
            oP.innerHTML = "<em>JavaScript</em>";
            console.log(oP.innerHTML);
        };
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当点击【设置】按钮之后，页面效果如下图 2 所示。

JavaScript 设置 innerHTML（1）

JavaScript 设置 innerHTML（2）

分析：

当我们点击【设置】按钮之后，控制台输出结果如下：

<em>JavaScript</em>

从这个例子可以看出，使用 innerHTML 不仅可以获取元素内部所有的内容，还可以设置元素内部的所有内容（如果本身已经有内容，则会直接替换全部）。其中，浏览器会解析你传入的字符串中的 HTML 标签，并将其渲染到对应元素的内部。

innerHTML 的安全隐患

虽然 innerHTML 非常强大，但在实际开发中，小伙伴们千万不要用它来直接显示用户输入的内容（比如用户评论、用户名等）。

比如黑客在输入框里输入了一段恶意脚本（例如 <script>alert("偷你密码")</script>），如果你使用 innerHTML 渲染到页面上时，这段脚本就会被执行。这就是著名的 “XSS（跨站脚本攻击）”。

总而言之，在处理用户输入的内容时，我们应该优先使用 textContent，因为它不会把内容当代码执行。

JavaScript textContent

在 JavaScript 中，我们可以使用 DOM 对象的 textContent 属性来 “获取” 或 “设置” 某个元素内部的 “文本内容”。

示例 3：获取 textContent

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p id="content"><strong style="color:hotpink;">绿叶网</strong></p>
    <p><button id="btn">获取</button></p>
    <script>
        const oP = document.getElementById("content");
        const oBtn = document.getElementById("btn");

        oBtn.onclick = function() {
            console.log(oP.textContent);
        };
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript 获取 textContent

分析：

当我们点击【获取】按钮之后，浏览器控制台输出结果如下：

绿叶网

与 innerHTML 不一样，textContent 属性只会获取元素内部所有的 “文本内容”。

示例 4：设置 textContent

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p id="content"><strong style="color:hotpink;">绿叶网</strong></p>
    <p><button id="btn">设置</button></p>
    <script>
        const oP = document.getElementById("content");
        const oBtn = document.getElementById("btn");

        oBtn.onclick = function() {
            oP.textContent = "<em>JavaScript</em>";
            console.log(oP.textContent);
        };
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当点击【设置】按钮之后，页面效果如下图 2 所示。

JavaScript 设置 textContent（1）

JavaScript 设置 textContent（2）

分析：

与 innerHTML 不一样，浏览器不会解析你传入的字符串中的 HTML 标签，而是直接将所有内容作为 “文本” 渲染。

textContent 和 innerText

相信很多小伙伴都听过 innerText 这个属性。其实它和 textContent 一样，都是用于获取和设置元素内部文本的属性。textContent 和 innerText 之间的区别在于：

textContent：是 DOM 最新标准的属性，它可以获取元素的所有文本内容，包括隐藏元素（display: none）的文本，并且性能更好。
innerText：是历史遗留属性，使用它无法获取隐藏元素（display: none）的文本，性能相对较差。

在实际开发中，我们应该使用 textContent，而不再推荐使用 innerText。