JavaScript innerHTML 属性设置 HTML 片段

时间：06-10来源：作者：点击数：38

在本教程中，您将学习如何使用 JavaScript 元素的 innerHTML 属性来获取或设置元素包含的 HTML 元素。

innerHTML 是 Element 的一个属性，它允许您获取或设置元素包含的 HTML 标签：

element.innerHTML = 'new content';
element.innerHTML;

读取元素的 innerHTML 属性

要获取元素中包含的 HTML 标签，你可以使用以下语法：

let content = element.innerHTML;

当您读取某个元素的 innerHTML 时，Web 浏览器序列化该元素后代的 HTML 片段。

JavaScript insideHTML 示例

假设您有以下 HTML 片段：

<ul id="menu">
    <li>Home</li>
    <li>Services</li>
</ul>

以下示例使用 innerHTML 属性来获取 <ul> 元素的内容：

let menu = document.getElementById('menu');
console.log(menu.innerHTML);

代码是如何运行的：

首先，使用 getElementById 方法通过 id 属性值 menu 选择元素<ul>。
然后，使用 <ul> 元素的 innerHTML 获取 HTML 内容。

输出：

<li>Home</li>
<li>Services</li>

设置元素的 innerHTML 属性

要设置属性的 innerHTML 值，请使用以下语法：

element.innerHTML = newHTML;

这将会使用新的内容替换元素的现有所有元素，这包括文本元素或者 HTML 标签。

例如，您可以通过给 document.body 设置空的 innerHTML 值来删除文档的全部内容：

document.body.innerHTML = '';

安全风险⚠️

HTML5 指定不应执行用 innerHTML 插入的 <script> 标记。

假设您有以下 index.html 文档：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS innerHTML example</title>
    </head>

    <body>
        <div id="main"></div>
        <script src="app.js"></script>
    </body>

</html>

app.js 文件如下所示：

const scriptHTML = `<script>alert("Alert from innerHTML");</script>`;
const main = document.getElementById('main');

main.innerHTML = scriptHTML;

在这个例子中，<script> 标签内部的 alert() 不会执行。

但是，如果将 app.js 源代码更改为以下内容：

const main = document.getElementById('main');

const externalHTML = `<img src='1' onerror='alert("Error loading image")'>`;
// shows the alert
main.innerHTML = externalHTML;

在本例中，src='1' 的图像将无法成功加载。因此，将执行 onerror回调函数运行 alert() 。黑客可能会包含恶意代码，而不是简单的 alert，打开网页的用户将容易受到攻击。

因此，您不应该使用 innerHTML 设置您无法控制的内容，否则您将面临潜在的安全风险。

如果要在元素中插入纯文本，可以使用 textContent 属性而不是 innerHTML.。textContent 不会被解析为 HTML，而是被解析为原始文本。