网页加载后需用JavaScript操作DOM实现动态内容更新：一、innerHTML替换整个子结构；二、textContent更新纯文本防XSS；三、appendChild()追加新元素；四、insertAdjacentHTML()在指定位置插入HTML；五、DocumentFragment批量插入提升性能。
如果您希望在网页加载后根据用户交互或程序逻辑实时更新页面内容，则需要通过JavaScript操作DOM来实现HTML内容的动态显示。以下是几种常用且有效的实现方案：
一、使用innerHTML属性替换元素内容
innerHTML允许直接设置或读取某个元素内部的HTML字符串，适用于快速替换整个子内容结构。
1、获取目标元素的引用，例如通过document.getElementById("content")。
2、将该元素的innerHTML属性赋值为新的HTML字符串，如element.innerHTML = "<p>动态插入的段落</p><ul><li>列表项1</li></ul>"。
立即学习“前端免费学习笔记（深入）”；
3、浏览器会自动解析该字符串并渲染为对应的DOM节点。
二、使用textContent属性更新纯文本内容
textContent仅处理文本内容，不解析HTML标签，可避免XSS风险，适合仅需更新文字的场景。
1、通过document.querySelector(".title")等方法选取目标元素。
2、设置其textContent属性为所需文本，例如element.textContent = "新标题内容"。
3、原有子节点（包括HTML标签）将被完全清除，仅保留纯文本节点。
三、使用appendChild()动态添加新元素
appendChild()用于将新创建的DOM节点追加到指定父元素末尾，保持原有结构不变，适合增量式内容更新。
1、调用document.createElement("div")创建新元素。
2、使用element.textContent或element.innerHTML设置其内容。
3、通过parentElement.appendChild(newElement)将其插入到目标容器中。
四、使用insertAdjacentHTML()在指定位置插入HTML
insertAdjacentHTML()支持在元素的四个相对位置（beforebegin、afterbegin、beforeend、afterend）插入HTML字符串，灵活性高于innerHTML。
1、获取目标元素引用，例如const box = document.getElementById("box")。
2、调用box.insertAdjacentHTML("beforeend", "<p>新增段落</p>")将HTML插入到元素内部末尾。
3、支持的位置参数必须为"beforebegin"、"afterbegin"、"beforeend"或"afterend"之一。
五、使用DocumentFragment批量插入多个节点
DocumentFragment作为轻量级文档片段，可在内存中构建节点树后再一次性挂载，减少重排重绘，提升性能。
1、创建片段对象：const fragment = document.createDocumentFragment()。
2、循环创建多个元素，并使用fragment.appendChild()逐个添加。
3、最后将fragment一次性添加至目标容器：container.appendChild(fragment)。
