JavaScript innerHTML 属性设置 HTML 片段
在本教程中，您将学习如何使用 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，而是被解析为原始文本。
结论
使用 innerHTML 元素的属性来获取或设置元素中包含的 HTML。innerHTML 属性返回元素子元素的 HTML 片段，包括页面所做的任何更改。请勿使用 innerHTML 属性设置您无法控制的新内容，以免造成安全风险。
湘公网安备 43102202000103号