使用JavaScript动态插入元素需操作DOM，常用方法包括：1. createElement结合appendChild添加新元素；2. insertBefore在指定位置插入；3. innerHTML直接插入HTML字符串但有性能和安全风险；4. insertAdjacentHTML精确插入且不破坏结构，推荐用于HTML片段。根据需求选择合适方法即可轻松实现内容动态更新。
在网页开发中，经常需要通过JavaScript动态添加内容。使用JS在现有HTML中插入新元素非常常见，比如添加新的列表项、表单字段或提示信息。实现这一功能的核心是操作DOM（文档对象模型）。下面介绍几种常用方法，帮助你轻松掌握如何插入新元素。
创建并追加新元素
最基础的方式是使用 document.createElement() 创建新元素，再用 appendChild() 将其添加到目标容器中。
示例：假设你想在一个 id 为 "container" 的 div 中插入一段文字：
const container = document.getElementById('container');<br>
const newParagraph = document.createElement('p');<br>
newParagraph.textContent = '这是一段新添加的文字';<br>
container.appendChild(newParagraph);
这样，一个新的段落就会被添加到容器的末尾。
立即学习“前端免费学习笔记（深入）”；
在指定位置插入元素
如果不想总加在末尾，可以使用 insertBefore() 方法，在某个子元素之前插入新元素。
示例：要在第一个子元素前插入新内容：
const parent = document.getElementById('container');<br>
const firstChild = parent.firstChild;<br>
const newElement = document.createElement('div');<br>
newElement.textContent = '我是插入在最前面的内容';<br>
parent.insertBefore(newElement, firstChild);
这个方法适合需要精确控制插入位置的场景。
使用 innerHTML 插入 HTML 字符串
如果你要插入的是带标签的HTML内容，直接修改 innerHTML 更方便。
示例：
const container = document.getElementById('container');<br>
container.innerHTML += '<span style="color: red;">新增红字</span>';
注意：这种方式会重新解析整个内容，可能影响性能，并且存在XSS风险，需确保内容安全。
使用 insertAdjacentHTML 精确插入HTML
更推荐的做法是使用 insertAdjacentHTML()，它可以在指定位置插入HTML字符串，且不会破坏原有DOM结构。
语法：element.insertAdjacentHTML(position, text);
- 'beforebegin'：元素自身之前
- 'afterbegin'：元素内部的第一个子元素之前
- 'beforeend'：元素内部的最后一个子元素之后（等同于 appendChild）
- 'afterend'：元素自身之后
const container = document.getElementById('container');<br>
container.insertAdjacentHTML('beforeend', '<p><strong>新段落</strong></p>');
这种方法既灵活又高效，适合大多数动态插入场景。
基本上就这些。根据你的需求选择合适的方法：创建元素用 createElement + appendChild/insertBefore，插入HTML片段优先考虑 insertAdjacentHTML。掌握这些技巧后，动态更新页面内容就变得很简单了。
