javascript DOM操作_怎样动态修改页面内容

18次阅读

优先用textContent更新纯文本,更安全高效;需html格式时才用innerHTML并过滤用户输入;操作前须检查元素存在性;表单控件须直接赋值value等属性而非innerHTML或textContent。

javascript DOM操作_怎样动态修改页面内容

直接改 textContent 还是 innerHTML

想动态更新文字,优先用 textContent;要插入带标签的 HTML 片段,才用 innerHTML。前者更快、更安全,不会触发 HTML 解析或执行内联脚本;后者有 xss 风险,尤其当内容来自用户输入时。

  • 纯文本更新:element.textContent = "新标题"
  • 需保留格式(如加粗、换行):element.innerHTML = "重点说明"
  • 用户输入必须过滤:innerHTML 前建议用 domPurify.sanitize() 或转义函数处理

找不到元素就报错?先确认节点是否存在

document.getElementById()queryselector() 返回 NULL 时,后续调用 .textContent 会抛 TypeError: Cannot set properties of null。别假设 DOM 已就绪。

  • 确保脚本在 DOM 加载后执行:把 js 放在
text=ZqhQzanResources