JavaScript innerHTML 属性

innerHTML 是 JavaScript 中的一个属性，它允许我们直接修改 HTML 元素的内容。

语法

以下是 innerHTML 属性的语法：

document.getElementById("myElement").innerHTML = "新的内容";

示例

接下来是一些使用 innerHTML 属性的示例：

<div id="myDiv">原始内容</div>

<button onclick="changeContent()">点击更改内容</button>

<script>
function changeContent() {
  document.getElementById("myDiv").innerHTML = "新的内容";
}
</script>

在上面的示例中，单击按钮时，将使用 innerHTML 属性将 div 元素的内容更改为“新的内容”。

工作原理

innerHTML 属性返回指定元素的内容，其中包括 HTML 标记。可以使用 innerHTML 属性直接向元素添加新内容。例如，要向 div 元素添加新的段落，可以使用以下 JavaScript 代码：

document.getElementById("myDiv").innerHTML += "<p>新的段落</p>";

innerHTML 属性还可以通过 JavaScript 用于创建新 HTML 元素：

var newDiv = document.createElement("div");
newDiv.innerHTML = "新的 div";
document.getElementById("myContainer").appendChild(newDiv);

安全考虑

由于 innerHTML 属性可以包含 HTML 代码，因此它很容易受到跨站脚本（XSS）攻击的影响。要确保 innerHTML 属性中的内容是安全的，您可以使用 JavaScript 库（如 jQuery），该库提供了一些用于转义和过滤 HTML 的实用程序函数。

总结

innerHTML 属性是一个强大和灵活的 JavaScript 特性，它使得能够很容易地修改 HTML 元素的内容。但是，在使用 innerHTML 属性时，务必要注意安全问题。