JavaScript innerHTML - JavaScript 教程

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

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

element.innerHTML = 'new content';
element.innerHTML;Code language: JavaScript (javascript)

读取元素的 innerHTML 属性

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

let content = element.innerHTML;Code language: JavaScript (javascript)

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

1) 简单 JavaScript innerHTML 示例

假设您有以下标记

<ul id="menu">
    <li>Home</li>
    <li>Services</li>
</ul>Code language: HTML, XML (xml)

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

let menu = document.getElementById('menu');
console.log(menu.innerHTML);Code language: JavaScript (javascript)

工作原理

首先，使用 getElementById() 方法通过其 ID（menu）选择 <ul> 元素。
然后，使用 innerHTML 获取 <ul> 元素的 HTML 内容。

输出

<li>Home</li>
<li>Services</li>Code language: HTML, XML (xml)

2) 检查当前 HTML 源代码

innerHTML 属性返回文档的当前 HTML 源代码，包括页面加载后所做的所有更改。

请参阅以下示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript innerHTML</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Services</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');

        // create new li element
        let li = document.createElement('li');
        li.textContent = 'About Us';

        // add it to the ul element
        menu.appendChild(li);

        console.log(menu.innerHTML);
    </script>
</body>
</html>Code language: HTML, XML (xml)

输出

<li>Home</li>
<li>Services</li>
<li>About Us</li>Code language: HTML, XML (xml)

工作原理。

首先，使用 getElementById() 方法获取具有 ID menu 的 <ul> 元素。
其次，创建一个新的 <li> 元素，并使用 createElement() 和 appendChild() 方法将其添加到 <ul> 元素中。
第三，使用 <ul> 元素的 innerHTML 属性获取 <ul> 元素的 HTML。<ul> 元素的内容包括初始内容和 JavaScript 动态创建的动态内容。

设置元素的 innerHTML 属性

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

element.innerHTML = newHTML;

设置将用新内容替换元素的现有内容。

例如，您可以通过清除 document.body 元素的内容来删除文档的全部内容

document.body.innerHTML = '';Code language: JavaScript (javascript)

⚠️ 安全风险

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>Code language: HTML, XML (xml)

而 app.js 文件如下所示

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

main.innerHTML = scriptHTML;Code language: JavaScript (javascript)

在此示例中，<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;Code language: JavaScript (javascript)

在此示例中，具有 src 1 的图像将无法成功加载。因此，错误处理将执行运行 alert() 的操作。

除了简单的 alert()，黑客可能会包含恶意代码，打开网页的用户将面临安全风险。

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

如果您想将纯文本插入文档，可以使用 textContent 属性，而不是 innerHTML。textContent 不会被解析为 HTML，而是被解析为原始文本。

总结

使用元素的 innerHTML 属性来获取或设置元素中包含的 HTML。
innerHTML 属性返回元素的当前 HTML 源代码，包括页面加载后所做的任何更改。
不要使用 innerHTML 来设置您无法控制的新内容，以避免安全风险。

测验

本教程对您有帮助吗？