使用 JavaScript 动态修改 HTML 文件中加载的内容
在网页开发过程中，我们常常需要根据用户的交互或程序运行的状态，动态修改已经加载到页面中的内容。JavaScript 作为前端开发的核心脚本语言，提供了多种便捷的方法来实现这一需求，无需重新加载整个页面即可更新局部内容，提升用户的使用体验。
核心操作原理
HTML 文档在浏览器中被解析后会形成文档对象模型（DOM），DOM 将页面中的所有元素、属性、文本都组织成一棵节点树。JavaScript 可以通过 DOM 提供的 API 访问树中的任意节点，对这些节点进行查询、修改、新增或删除操作，从而实现页面内容的动态更新。
常用的内容修改方法
1. 修改元素的文本内容
如果只需要修改元素内部的纯文本，常用的属性是 textContent 和 innerText。其中 textContent 会返回元素及其所有后代的文本内容，不会考虑 CSS 样式的影响；innerText 则会考虑元素的渲染状态，只返回可见的文本内容。
示例代码如下：
// 获取 id 为 demo 的元素
const demoElement = document.getElementById('demo');
// 修改元素的文本内容
demoElement.textContent = '这是动态修改后的文本内容';2. 修改元素的 HTML 内容
如果需要修改元素内部的 HTML 结构，比如添加带有标签的内容，可以使用 innerHTML 属性。需要注意的是，使用 innerHTML 插入的内容会被浏览器解析为 HTML 元素，因此如果插入的内容包含用户输入的内容，需要做防 XSS 处理。
示例代码如下：
// 获取 id 为 container 的元素
const container = document.getElementById('container');
// 修改元素的 HTML 内容，插入一个带有样式的段落
container.innerHTML = '<p style="color: red;">这是动态插入的红色段落</p>';3. 修改表单元素的值
对于 <input>、<textarea>、<select> 等表单元素，修改其显示内容需要使用 value 属性。
示例代码如下：
// 获取 id 为 username 的输入框
const usernameInput = document.getElementById('username');
// 设置输入框的默认值
usernameInput.value = '默认用户名';
// 获取 id 为 city 的下拉框
const citySelect = document.getElementById('city');
// 设置下拉框的选中项
citySelect.value = 'beijing';4. 修改元素的属性
除了修改元素的内容，还可以动态修改元素的属性，比如修改 <img> 标签的 src 属性更换图片，修改 <a> 标签的 href 属性更换跳转链接，或者修改元素的自定义属性。
示例代码如下：
// 获取 id 为 banner 的图片元素
const bannerImg = document.getElementById('banner');
// 动态修改图片的 src 属性，切换图片
bannerImg.src = 'https://www.ipipp.com/banner-new.jpg';
// 获取 id 为 link 的链接元素
const linkElement = document.getElementById('link');
// 修改链接的跳转地址
linkElement.href = 'https://www.ipipp.com/detail';
// 修改链接的显示文本
linkElement.textContent = '查看详情';动态修改内容的常见场景
用户点击按钮后，更新页面中的提示信息
根据接口返回的数据，动态渲染列表、表格等内容
表单验证失败后，动态显示错误提示文本
轮播图切换时，动态修改图片和对应的描述文本
用户切换主题时，动态修改页面元素的样式类或属性
注意事项
在动态修改页面内容时，需要注意以下几点：
操作 DOM 前要确保目标元素已经加载完成，通常可以将脚本放在页面底部，或者使用
DOMContentLoaded事件监听 DOM 加载完成后再执行操作。频繁修改
innerHTML可能会导致页面重绘和回流，影响性能，如果需要批量更新内容，可以先将更新内容拼接完成后再一次性赋值。使用
innerHTML插入不可信内容时，要进行转义处理，避免 XSS 攻击。修改表单元素的值不会触发
change事件，如果需要触发相关事件，需要手动调用事件触发方法。
完整示例
下面是一个简单的完整示例，点击按钮后动态修改页面中的文本和图片：
HTML 部分：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>动态修改内容示例</title> </head> <body> <h3 id="title">初始标题</h3> <img id="img" src="https://www.ipipp.com/img1.jpg" width="200"> <p id="desc">初始描述文本</p> <button id="changeBtn">点击修改内容</button> <script src="script.js"></script> </body> </html>
JavaScript 部分（script.js）：
// 监听 DOM 加载完成
document.addEventListener('DOMContentLoaded', function() {
// 获取按钮元素
const changeBtn = document.getElementById('changeBtn');
// 给按钮绑定点击事件
changeBtn.addEventListener('click', function() {
// 修改标题文本
document.getElementById('title').textContent = '动态修改后的标题';
// 修改图片地址
document.getElementById('img').src = 'https://www.ipipp.com/img2.jpg';
// 修改描述文本
document.getElementById('desc').textContent = '这是点击按钮后更新的描述内容';
});
});上述示例中，当页面加载完成后，点击按钮就会触发内容修改的逻辑，将标题、图片和描述文本都替换为新的内容，整个过程无需刷新页面。