应根据内容类型选择 innerhtml 或 textcontent：innerhtml 用于可信的结构化 html，但会清空事件监听器；textcontent 用于纯文本防 xss；表单控件用 value 属性；动态样式优先用 classlist；操作前需确保 dom 已加载。

innerHTML 和 textContent 是最常用、最直接的两个方法，但选错会导致 XSS 漏洞、事件丢失或样式异常——关键不是“能不能改”，而是“该用哪个改”。

用 innerHTML 插入含标签的内容时，必须确认来源可信

它会把字符串当作 HTML 解析并渲染，适合插入结构化内容（比如带 <strong></strong> 或列表的富文本），但也会清空原有子节点和绑定的所有事件监听器。

• 如果目标元素内有通过 addEventListener 绑定的按钮点击逻辑，element.innerHTML = "..." 后那些点击就失效了
• 用户输入的数据（如评论、表单值）绝不能直接拼进 innerHTML，否则可能执行恶意脚本
• 想保留原有部分结构再追加？用 element.insertAdjacentHTML("beforeend", "...") 更安全，不重置整个子树

用 textContent 更新纯文本，防 XSS 且性能更好

它只处理文本节点，所有 HTML 字符（如 、<code>&）会被自动转义，适合显示用户输入、状态提示、数字计数等场景。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• element.textContent = "<script>alert(1)</script>" 会原样显示为字符串，不会执行
• 比 innerHTML 渲染快，尤其在大量文本更新时（如日志滚动、实时消息）
• 注意：innerText 受 CSS display: none 或 visibility: hidden 影响，而 textContent 不受，行为更可预测

修改表单控件内容要用 value，不是 innerHTML

<input>、<textarea></textarea>、<select></select> 这类元素的显示值由其 value 属性控制，改 innerHTML 完全无效。

• document.querySelector("input").value = "新输入值" 才生效
• <textarea></textarea> 同样用 value，不是 textContent（虽然 textContent 能读取初始值，但写入不触发控件更新）
• <select></select> 改选中项：直接设 selectElement.value = "option-value"，或设 selectElement.selectedIndex = 2

动态改样式优先用 classList，少碰 style 和 className

直接操作 style 属性只能加内联样式，难维护；className 是字符串替换，容易误删其他类；classList 是现代标准，精准可控。

• 添加类：element.classList.add("active", "highlight")
• 移除类：element.classList.remove("disabled")
• 切换类：element.classList.toggle("hidden")（存在则删，不存在则加）
• 检查类：element.classList.contains("error") 返回布尔值，可用于条件逻辑

真正容易被忽略的点是：改内容前是否需要等待 DOM 加载完成？如果脚本放在 里，document.getElementById 可能返回 null。确保操作在 DOMContentLoaded 事件后执行，或把 script 标签移到 前。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！