在前端开发中，修改 HTML 内容是非常常见的需求。我们通常使用 JavaScript 来实现这个功能。本文将介绍如何使用 JavaScript 修改 HTML 内容，并提供一些代码示例。
用 JavaScript 修改 HTML 元素文本内容
获取元素
要修改 HTML 元素的文本内容，需要获取该元素。可以通过以下方法获取元素：
const element = document.getElementById('element-id');
其中 'element-id' 是需要获取的元素的 ID。
修改元素文本内容
获取到元素后，就可以通过 innerText 或 innerHTML 属性修改元素的文本内容。innerText 属性会忽略 HTML 标签，只显示文本内容。innerHTML 属性则会解析 HTML 标签并显示相应的效果。
例如，如果要将 ID 为 element-id 的元素的文本内容修改为 "Hello, world!"，可以使用以下代码：
const element = document.getElementById('element-id');
element.innerText = 'Hello, world!';
或者使用 innerHTML：
const element = document.getElementById('element-id');
element.innerHTML = 'Hello, world!';
注意，当使用 innerHTML 修改元素内容时，务必确保内容安全，以避免跨站脚本攻击（XSS）。
用 JavaScript 修改 HTML 元素属性值
获取元素
要修改 HTML 元素的属性值，同样需要先获取该元素。可以通过以下方法获取元素：
const element = document.getElementById('element-id');
其中 'element-id' 是需要获取的元素的 ID。
修改元素属性值
获取到元素后，就可以通过 setAttribute() 方法修改元素的属性值。该方法接受两个参数：属性名和属性值。例如，如果要将 ID 为 element-id 的元素的 src 属性修改为 "image.png"，可以使用以下代码：
const element = document.getElementById('element-id');
element.setAttribute('src', 'image.png');
结语
本文介绍了如何使用 JavaScript 修改 HTML 元素的文本内容和属性值。以上代码示例仅供参考，实际应用中可能需要根据具体需求进行修改和优化。