JavaScript动态创建与插入DOM元素需三步：先用document.createElement()创建空节点，再用textContent、innerHTML或setAttribute()设置内容与属性，最后通过appendChild()或insertBefore()插入真实DOM；频繁操作时应使用DocumentFragment提升性能。
JavaScript 动态创建与插入 DOM 元素的核心在于用代码生成节点，再将其挂载到页面中——不依赖 HTML 静态结构，而是运行时按需构造。
创建元素：document.createElement()
这是最基础的方式，用于生成一个指定标签名的空元素节点。
- 语法简单：
const div = document.createElement('div'); - 创建后是纯 JS 对象，尚未出现在页面中，也不在 DOM 树里
- 支持所有标准 HTML 标签，包括
section、article、input等 - 注意：不能传入带属性的字符串（如
createElement('div class="box"')是错的）
设置内容与属性
新元素默认为空，需手动添加文本、HTML 或属性。
- 设文本内容用
textContent（安全，防 XSS）：div.textContent = 'Hello'; - 设 HTML 内容用
innerHTML（谨慎使用）：div.innerHTML = '<strong>Hi</strong>'; - 设属性用
setAttribute()：div.setAttribute('id', 'myDiv'); - 也可直接赋值原生属性：
div.id = 'myDiv';（适用于id、className、src等）
插入到页面：appendChild() 与 insertBefore()
创建并配置好元素后，必须把它加进真实 DOM 才能显示。
立即学习“Java免费学习笔记（深入）”；
-
parent.appendChild(child)：追加到父容器末尾 -
parent.insertBefore(newNode, referenceNode)：插在某个已有节点前 - 常见父容器：
document.body、document.getElementById('container')、document.querySelector('.list') - 示例：
document.body.appendChild(div);—— 这时 div 才真正渲染出来
批量操作与文档片段：提升性能
频繁调用 appendChild() 可能触发多次重排重绘，影响性能。推荐用 DocumentFragment 缓存一批节点，一次性插入。
- 创建片段：
const frag = document.createDocumentFragment(); - 把多个新元素先 append 到 frag：
frag.appendChild(li1); frag.appendChild(li2); - 最后只执行一次插入：
ul.appendChild(frag); - 片段本身不会被渲染，只作为中转容器，效率更高
