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

innerHTMLElement 的一个属性,它允许您获取或设置元素包含的 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,而是被解析为原始文本。

结论

使用 innerHTML 元素的属性来获取或设置元素中包含的 HTML。innerHTML 属性返回元素子元素的 HTML 片段,包括页面所做的任何更改。请勿使用 innerHTML 属性设置您无法控制的新内容,以免造成安全风险。