JavaScript动态创建并插入DOM节点需两步：先用document.createElement()创建空元素，再用appendChild()、insertBefore()、before()/after()或prepend()等方法插入目标位置；支持设置属性、样式、文本，并可用insertAdjacentHTML()安全高效地批量插入HTML结构。
JavaScript 中动态创建并插入新 DOM 节点，核心是两步：先用 document.createElement() 创建节点，再用 appendChild()、insertBefore() 或 before()/after() 等方法插入到目标位置。
创建元素节点
使用 document.createElement(tagName) 生成一个指定标签名的空元素节点：
const div = document.createElement('div');
const p = document.createElement('p');
创建后可立即设置属性、文本内容或样式：
div.id = 'myDiv'; div.className = 'container'; p.textContent = '这是段落内容'; p.style.color = '#333';
插入到父容器末尾（最常用）
用 parentNode.appendChild(child) 将新节点添加为父节点的最后一个子节点：
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
const container = document.getElementById('container');
container.appendChild(div); // div 成为 container 的最后一个子元素
注意：appendChild() 会移动已有节点（如果传入的是页面中已存在的节点），不是复制。
插入到指定位置（前/后/中间）
更灵活的插入方式：
-
parent.insertBefore(newNode, referenceNode)：在referenceNode前插入newNode -
referenceNode.before(newNode)：在referenceNode前插入（支持多个参数） -
referenceNode.after(newNode)：在referenceNode后插入 -
parent.prepend(newNode)：插入为父节点的第一个子节点
const firstP = document.querySelector('p');
firstP.before(div); // div 插入到第一个 <p> 元素前面
container.prepend(p); // p 成为 container 的第一个子元素
批量插入或插入含子节点的内容
若要插入带结构的 HTML 字符串，可用 innerHTML 或 insertAdjacentHTML()：
-
element.innerHTML = '<span>Hello</span><em>World</em>'—— 替换全部子节点 -
element.insertAdjacentHTML('beforeend', '<b>Bold</b>')—— 在末尾追加，不破坏原有节点
推荐用 insertAdjacentHTML() 避免重绘开销，且更安全（相比直接拼接字符串 + innerHTML）。
