JavaScript DOM操作怎么进行_如何动态更新页面【教程】-js教程-PHP中文网

innerHTML能用但有XSS风险；用户输入需过滤，静态内容优先用textContent；insertAdjacentHTML不清空原内容，appendChild需已挂载节点；DOM更新后立即查询需确认是否真正插入。

javascript dom操作怎么进行_如何动态更新页面【教程】

直接改 `innerHTML` 安不安全？

能用，但有风险。只要内容来自可信源（比如你自己写的字符串、或已过滤的后端数据），innerHTML 是最直白的更新方式；一旦拼接了用户输入，就可能触发 XSS —— 浏览器会把字符串里的 <script></script> 当成真实脚本执行。

常见错误现象：element.innerHTML = '

' + userInput + '

'，如果 userInput 是，弹窗就出来了。

实操建议：

纯静态内容更新（如状态文案）：用 textContent 更安全，它只当文本处理，不解析 HTML
必须插 HTML 片段时：先用 DOMPurify.sanitize() 过滤（需引入库），或手动白名单替换（仅限简单场景）
避免在循环里反复赋值 innerHTML，性能差；应拼好完整字符串再一次性写入

`appendChild` 和 `insertAdjacentHTML` 选哪个？

appendChild 适合添加已创建的 DOM 节点，控制力强、无解析开销；insertAdjacentHTML 更灵活，支持在目标元素的四个位置（'beforebegin'、'afterbegin'、'beforeend'、'afterend'）插入 HTML 字符串，且不重绘整个父容器。

使用场景对比：

动态生成列表项：用 document.createElement('li') + appendChild，便于后续绑定事件或修改单个项
在现有内容前追加提示条：用 element.insertAdjacentHTML('beforebegin', '注意 ')，比先取 outerHTML 再拼接干净得多
insertAdjacentHTML 不会清空原内容，innerHTML 会 —— 这是关键区别

为什么 `querySelector` 找不到刚插入的元素？

不是找不见，是时机错了。DOM 更新是同步的，但如果你在插入后立刻调用 querySelector 却没找到，大概率是因为插入操作本身没生效 —— 比如你忘了调用 appendChild，或者插入的是一个未挂载的文档片段（DocumentFragment）但没把它真正 append 到页面上。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

典型错误代码：

const frag = document.createDocumentFragment();
const item = document.createElement('p');
item.textContent = 'hello';
frag.appendChild(item); // ✅ 插入到 frag
// ❌ 忘了：document.body.appendChild(frag)
console.log(document.querySelector('p')); // null

实操建议：