HTML DOM innerHTML 属性

什么是 innerHTML 属性？

innerHTML 属性是 HTML DOM 中的一个属性，它代表了一个 HTML 元素的子元素和文本内容。通过设置 innerHTML 属性，我们可以动态地改变元素的内容，包括添加新的元素、修改文本内容、甚至是删除元素。

如何使用 innerHTML 属性？

要使用 innerHTML 属性，我们首先需要获取对应的 HTML 元素。我们可以通过 document.getElementById() 或者其他 DOM 方法来获取元素，然后通过 innerHTML 属性来操作元素的内容。

示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>innerHTML 示例</title>
</head>
<body>

<div id="myElement">
    <p>Hello, world!</p>
</div>

<button onclick="changeContent()">点击这里改变内容</button>

<script>
function changeContent() {
    var element = document.getElementById("myElement");
    element.innerHTML = "<p>New content here!</p>";
}
</script>

</body>
</html>

在上面的示例代码中，我们首先定义了一个包含一个 <div> 元素和一个 <button> 元素的 HTML 页面。当用户点击按钮时，changeContent() 函数会被调用，这个函数获取了 myElement 的引用，并通过设置 innerHTML 属性来改变 myElement 的内容。

注意事项

在使用 innerHTML 属性时，需要注意以下几点：

1. innerHTML 属性会重写元素的内容，包括子元素和文本内容。因此，在设置 innerHTML 属性时，会删除原有的内容并替换为新内容。
2. 由于 innerHTML 属性允许设置任意的 HTML 内容，因此需要注意防止 XSS 攻击。在动态设置 innerHTML 属性时，应该对输入的内容进行合适的过滤和转义，避免恶意脚本的注入。

总结

通过 innerHTML 属性，我们可以方便地改变 HTML 元素的内容，实现动态更新页面的效果。但在使用时需要注意安全性和性能方面的考虑，避免出现潜在的安全风险和性能问题。希望本文能帮助你更好地理解和应用 innerHTML 属性。