使用 innerHTML 改变 HTML 元素内容

在JavaScript中，可以使用 innerHTML 属性来动态地更改HTML元素的内容。这个属性的值是一个字符串，它包含了要替换元素内容的HTML代码。

语法

document.getElementById('elementId').innerHTML = '要更改的内容';

其中，getElementById 是一个DOM方法，用于获取HTML文档中具有指定ID的元素。innerHTML 是元素的属性，用于设置或获取元素的HTML内容。

示例

假设我们有以下HTML代码：

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

我们可以使用以下JavaScript代码更改div元素的内容：

let myDiv = document.getElementById('myDiv');
myDiv.innerHTML = '更改后的内容';

以上代码执行后，div元素的内容将更新为“更改后的内容”。

注意事项

• innerHTML 可能会被一些浏览器解释为只读属性。在这种情况下，您可以使用 innerText 或 textContent 代替 innerHTML。
• 当使用 innerHTML 设置元素内容时，请确保输入的字符串是安全的，以避免XSS攻击。
• 更改 innerHTML 属性会破坏元素本身的事件处理程序。如果需要更改事件处理程序，请使用 addEventListener 或其他与事件相关的方法。

结论

使用 innerHTML 属性可以轻松地动态更改HTML元素的内容。但是，请记住安全规则，以确保您的网站不会受到XSS攻击的威胁。