可通过innerHTML、textContent、className、classList和style五种方法动态更新HTML元素内容或样式：innerHTML替换全部HTML内容；textContent仅更新纯文本；className整体覆盖类名；classList精准增删改查单个类；style直接设置内联样式。
如果您需要在网页运行过程中实时更新HTML元素的内容或外观，则可能是由于用户交互、数据加载或状态变化触发了动态更新需求。以下是实现此目标的多种方法：
一、使用innerHTML属性修改元素内容
innerHTML允许直接替换目标元素内的全部HTML内容，适用于需插入含标签结构的字符串场景。
1、通过document.getElementById()获取目标元素对象。
2、将新HTML字符串赋值给该元素的innerHTML属性。
立即学习“前端免费学习笔记（深入）”；
3、浏览器自动解析并渲染新内容，原有子节点被完全替换。
二、使用textContent属性更新纯文本内容
textContent仅处理文本节点，不解析HTML标签，可避免XSS风险且执行效率更高。
1、通过querySelector或getElementById定位目标元素。
2、将纯文本字符串赋值给该元素的textContent属性。
3、所有子节点的文本内容被统一替换，HTML标签将作为普通字符显示。
三、通过className属性批量切换CSS样式
className直接控制元素的class属性值，适合预定义多套样式并通过类名快速切换。
1、获取需要变更样式的DOM元素。
2、将新的类名字符串整体赋值给元素的className属性。
3、原类名被完全覆盖，务必确保新字符串包含所有需保留的类名。
四、使用classList API精细化控制样式类
classList提供add()、remove()、toggle()等方法，支持对单个类名进行增删改查，无需手动拼接字符串。
1、调用目标元素的classList.add()方法添加指定类名。
2、调用classList.remove()方法移除已有类名。
3、调用classList.toggle()方法在存在时删除、不存在时添加该类名。
4、classList不会影响其他已存在的类名，操作安全可控。
五、直接操作style属性修改内联样式
style属性映射元素的内联CSS声明，适用于需动态计算并应用单个样式值的场景。
1、获取目标DOM元素。
2、将CSS属性名转换为驼峰命名法（如background-color → backgroundColor）。
3、对元素的style对象对应属性赋值，例如element.style.color = 'red'。
4、该方式设置的样式优先级高于外部CSS文件中的同名规则。
