如何操作DOM_JavaScript怎样改变网页内容【教程】

textContent 安全替换文字内容：element.textContent = “新内容”，只处理纯文本、防 xss、清空子元素结构和事件监听器，IE9+ 全支持。

直接改 innerhtml 最快，但有 XSS 风险；想安全更新内容，优先用 textContent 或 createElement + appendChild。

怎么用 textContent 安全替换文字内容

它只处理纯文本，不解析 HTML，天然防脚本注入，适合显示用户输入或动态文本。

• 设置文本：element.textContent = "新内容"
• 读取当前文本：const text = element.textContent
• 注意：会清空子元素的所有 HTML 结构和事件监听器（如果有的话）
• 兼容性好，IE9+ 全支持

innerHTML 能否插入带标签的内容？能，但要自己把关

它把字符串当 HTML 解析并渲染，方便但危险——如果字符串含用户输入，可能执行恶意脚本。

• 插入结构：element.innerHTML = "加粗和其他"
• 常见错误：拼接用户数据如 innerHTML = "
  " + userInput + "

  " → 可能触发

• 若必须用，先做 HTML 转义（例如用 document.createElement("div").textContent = str 再取 innerHTML）

动态添加元素为什么推荐 createElement + appendChild

比拼接字符串更可控，避免转义遗漏，也便于后续操作（比如绑定事件、加 class、删节点）。

立即学习“Java免费学习笔记（深入）”；

• 创建并插入：

  const p = document.createElement("p"); p.textContent = "这是新段落"; p.className = "note"; document.body.appendChild(p);

• 批量插入时，用 DocumentFragment 减少重排：const frag = document.createDocumentFragment(); ... frag.appendChild(p); parent.appendChild(frag);
• 不要在循环里反复写 innerHTML += ...，性能差且会销毁已有事件监听器

真正难的不是“怎么改”，而是“改哪儿”和“什么时候改”——dom 可能还没加载完，querySelector 就返回 NULL；异步更新后忘了清理旧监听器，导致内存泄漏。这些细节比语法更容易出问题。