JavaScript动态创建DOM节点有三法：1. createElement()创建标准元素并设属性；2. insertAdjacentHTML()安全插入HTML字符串；3. DocumentFragment批量插入提升性能。
JavaScript 中动态创建并插入 DOM 节点，核心是三步：创建节点、设置内容或属性、挂载到页面中。关键不在于写多少行代码，而在于选对方法、避开常见坑。
用 document.createElement() 创建元素节点
这是最常用的方式，适合创建标准 HTML 元素（如 div、p、button）：
- 传入标签名字符串，返回一个未挂载的 Element 对象
- 创建后需手动设置 innerHTML、textContent、className、id 等属性
- 注意：它不解析 HTML 字符串，
createElement('div<span>text</span>')会报错
示例：
const newDiv = document.createElement('div');newDiv.className = 'alert';
newDiv.textContent = '操作成功！';
用 innerHTML + insertAdjacentHTML() 快速插入带结构的 HTML
当要插入含子元素、属性甚至事件绑定的片段时，比逐个 createElement 更高效：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
insertAdjacentHTML(position, htmlString)直接解析字符串并插入，支持四个位置：'beforebegin'、'afterbegin'、'beforeend'、'afterend' - 比 innerHTML + appendChild 组合更安全——不会重写已有内容
- 注意 XSS 风险：确保 htmlString 来源可信，避免直接拼接用户输入
示例：
const container = document.getElementById('list');container.insertAdjacentHTML('beforeend', '
用 DocumentFragment 批量插入，提升性能
一次性添加多个节点时，频繁操作真实 DOM 会触发多次重排重绘。DocumentFragment 是轻量容器，不直接渲染，适合中转：
- 先创建 fragment，把多个新节点 append 进去
- 最后只调用一次 appendChild 或 replaceChildren 把整个 fragment 插入目标节点
- 尤其适合循环生成列表、表格行等场景
示例：
const frag = document.createDocumentFragment();for (let i = 0; i const li = document.createElement('li');
li.textContent = `第 ${i + 1} 项`;
frag.appendChild(li);
}
document.getElementById('list').appendChild(frag);
插入位置控制：append()、prepend()、before()、after() 等现代方法
ES6+ 提供了语义清晰、兼容性良好的插入方法（IE 不支持，需考虑 polyfill）：
-
parent.append(child1, child2)：追加到末尾（支持多个参数，也接受字符串） -
parent.prepend(child)：插入到开头 -
element.before(newNode)：插在 element 前面（同级） -
element.after(newNode)：插在 element 后面（同级）
这些方法比传统的 appendChild / insertBefore 更直观，且支持插入文本节点（自动转为 Text 节点）。
