appendChild用于添加DOM节点，适合操作频繁的元素；insertAdjacentHTML插入HTML字符串，支持多位置插入，适用于静态内容快速渲染。
在 JavaScript 中操作 DOM 是前端开发的基础技能。向页面中插入新元素时，appendChild 和 insertAdjacentHTML 是两个常用但用途不同的方法。它们各有适用场景，理解其区别能帮助你更高效地更新页面结构。
appendChild：添加节点对象
appendChild 是 Node 接口的方法，用于将一个已创建的 DOM 节点添加到目标元素的子节点末尾。
它只接受 DOM 节点作为参数，不能直接插入 HTML 字符串。
使用步骤：- 先用 document.createElement() 创建元素节点
- 可选：设置属性、类名或文本内容
- 调用父元素的 appendChild() 将节点插入末尾
示例：
立即学习“Java免费学习笔记（深入）”；
const div = document.createElement('div');
div.textContent = '我是新元素';
document.body.appendChild(div);
优点是操作的是真实 DOM 节点，便于后续事件绑定和修改。缺点是如果要插入复杂结构，代码会比较繁琐。
insertAdjacentHTML：插入 HTML 字符串
insertAdjacentHTML 是 Element 的方法，可以直接将 HTML 字符串插入到指定位置。它比 innerHTML 更灵活，不会覆盖原有内容。
它接受两个参数：插入位置 和 要插入的 HTML 字符串。
常用位置值：
- 'beforebegin'：元素自身之前
- 'afterbegin'：元素内部第一个子元素之前
- 'beforeend'：元素内部最后一个子元素之后（等同于 appendChild 的位置）
- 'afterend'：元素自身之后
示例：
立即学习“Java免费学习笔记（深入）”；
document.body.insertAdjacentHTML('beforeend', '<div>我是通过字符串插入的</div>');
适合快速插入模板片段或动态生成的 HTML 内容。但插入后若需操作元素，得再用 querySelector 等方法获取引用。
如何选择？
如果你已有 DOM 节点或需要频繁操作新元素（如绑定事件），用 appendChild 更合适。
如果只是插入一段静态 HTML 或模板字符串，insertAdjacentHTML 更简洁高效。
注意：insertAdjacentHTML 不执行 script 标签，默认较安全；而动态创建 script 需手动处理。
基本上就这些。掌握这两个方法的特点，能让你在不同场景下做出合理选择。
