JavaScript 动态创建和插入 DOM 节点的核心是用 document.createElement() 创建元素，再通过 appendChild()、insertBefore() 或 insertAdjacentElement() 等方法插入到指定位置；需注意插入位置选择、批量操作性能优化（如使用 DocumentFragment）及内容安全性（如 innerHTML 的 XSS 风险）。
JavaScript 中动态创建和插入 DOM 节点，核心是用 document.createElement() 创建元素，再用 appendChild()、insertBefore() 或 insertAdjacentElement() 等方法插入到页面中。关键不在“能不能”，而在“插到哪”和“怎么插更安全高效”。
用 createElement 创建基础节点
这是最常用的方式，传入标签名字符串即可生成对应元素节点：
-
const div = document.createElement('div');创建空的<div></div> -
const p = document.createElement('p');创建段落节点，不带内容也不带属性 - 创建后需手动设置内容（
textContent或innerHTML）和属性（setAttribute()或直接赋值className、id等）
插入到已有父节点的常用方法
插入位置决定渲染效果，选对方法很重要：
-
parent.appendChild(child)：加到父节点末尾（最常用） -
parent.insertBefore(newNode, referenceNode)：插在指定兄弟节点前，referenceNode必须是父节点的子节点 -
element.insertAdjacentElement(position, newNode)：支持四种相对位置：'beforebegin'、'afterbegin'、'beforeend'、'afterend'，适合精确控制插入点
批量插入与性能优化小技巧
一次插入多个节点时，直接反复调用 appendChild() 会触发多次重排重绘，影响性能：
立即学习“Java免费学习笔记（深入）”；
- 用
DocumentFragment作为临时容器，先把所有新节点 append 进去，最后只插入一次 Fragment - 避免在循环中反复读取
innerHTML或遍历childNodes，改用缓存或一次性操作 - 插入前确保目标父节点存在，可用
if (parent && parent.nodeType === Node.ELEMENT_NODE)做简单校验
插入文本节点与混合内容
除了元素节点，有时需要插入纯文本或组合内容：
-
document.createTextNode('Hello')创建文本节点，比直接设textContent更底层，但日常少用 - 给元素设
innerHTML可一次性写入 HTML 字符串，但要注意 XSS 风险，非可信内容务必先转义 - 组合插入时，推荐先创建结构，再统一 append，比如先建
li，再设文字和 class，最后加进ul
