使用document.createElement()创建元素并结合appendChild()、append()、innerHTML或insertAdjacentHTML方法可动态添加内容，其中createElement适合精细控制，append支持多节点插入，innerHTML适用于简单结构但影响性能，insertAdjacentHTML则更安全高效，适用于复杂场景。
在网页开发中，JavaScript 能够通过 DOM 操作动态创建和添加元素，让页面内容更具交互性和灵活性。不需要刷新页面，就能实时更新结构和内容。下面介绍几种常用方法来实现动态添加元素。
使用 document.createElement() 创建元素
这是最基础也是最常用的方法。先创建元素节点，再设置其属性或内容，最后插入到页面中。
例如，创建一个段落并添加文本：
const newParagraph = document.createElement('p');
newParagraph.textContent = '这是一段动态添加的文字。';
此时元素还只是存在于内存中，需要将其挂载到 DOM 树上才能显示。
立即学习“Java免费学习笔记（深入）”；
使用 appendChild() 或 append() 添加元素
将创建好的元素添加到指定的父容器中。
使用 appendChild() 方法（传统方式）：
document.body.appendChild(newParagraph);
或者使用更现代的 append() 方法，它支持同时添加多个节点或字符串：
document.getElementById('container').append(newParagraph);
append() 更灵活，还可以直接插入文本：
document.body.append('新增文本', anotherElement);
使用 innerHTML 插入 HTML 字符串
如果想一次性添加包含标签的复杂结构，可以直接修改父元素的 innerHTML。
document.getElementById('list').innerHTML += '虽然写法简单，但 innerHTML 会重写整个内容，可能导致事件丢失或性能问题，频繁操作时不推荐。
使用 insertAdjacentHTML() 精准插入
这个方法可以在指定位置插入 HTML 字符串，不会破坏现有 DOM 结构。
语法：element.insertAdjacentHTML(position, text)
常见位置参数：
- 'beforebegin'：元素前面
- 'afterbegin'：元素内部第一个子元素前
- 'beforeend'：元素内部最后一个子元素后（常用）
- 'afterend'：元素后面
示例：在 id 为 list 的元素末尾添加一项
document.getElementById('list').insertAdjacentHTML(
'beforeend',
'这种方式比 innerHTML 更安全高效，适合动态构建列表等场景。
基本上就这些。根据实际需求选择合适的方法：需要精细控制用 createElement + appendChild，批量插入可用 append，快速渲染结构可用 insertAdjacentHTML。掌握这些，就能灵活操作页面内容了。
