jQuery DOM 操作详解：节点创建、插入与删除实战
通过原生 JavaScript 获取和操作 DOM 节点虽然灵活，但在处理复杂结构时往往显得繁琐。特别是在动态加载数据后需要实时调整页面结构时，原生 API 的兼容性处理和代码量都成了负担。
jQuery 提供了一套简洁的接口，让我们能用更接近 HTML 的方式操作 DOM。本文将深入探讨节点创建、插入位置选择以及移除策略，帮助你在实际开发中写出更健壮的代码。
一、节点创建与属性处理
原生方式通常需要 document.createElement、setAttribute 和 appendChild 组合使用，且浏览器兼容性问题常需额外处理。jQuery 则允许我们直接传入 HTML 字符串，自动完成解析和初始化。
1. 创建元素节点
最直观的方式是直接使用 $() 函数包裹 HTML 标记字符串。这种方式不仅保留了 HTML 的结构感，还能一次性设置好属性和样式。
// 创建一个带有 class 属性的 div
var $div = $("<div class='right'><div class='aaron'>动态创建 DIV 元素</div></div>");
2. 文本与属性混合
在创建过程中，文本内容可以直接嵌入标签内，无需单独创建文本节点。同时，类名、ID 等属性也能在字符串定义阶段一并指定。
// 包含文本内容和自定义属性
var $node = $("<div id='test' class='container'>我是文本节点</div>");
这种写法极大地减少了样板代码，让逻辑集中在业务层面而非 DOM 构建细节上。
二、节点插入策略
创建好的节点默认存在于内存中，要使其生效必须插入文档。jQuery 根据插入位置的不同，提供了多组方法，核心区别在于语法主体（谁调用谁）和目标对象（被插入到哪里）。
1. 内部插入：append() 与 prepend()
当需要将新节点作为子元素放入现有容器时，主要关注它是放在末尾还是开头。
- append() / appendTo()：追加到末尾。
- prepend() / prependTo()：前置到开头。
两者的功能一致，只是调用方向不同。.append() 是'容器追加内容'，而 .appendTo() 是'内容追加到容器'。
// 将新元素追加到 #container 内部末尾
$("<p>新段落</p>").appendTo("#container");
// 等价于
$("#container").append("<p>新段落</p>");
同理，prepend() 系列方法用于在子元素列表的最前端插入内容。
2. 外部插入：after() 与 before()
如果新节点不需要成为子元素，而是作为兄弟节点存在，则使用外部插入方法。
- ：插入到选中元素之前。
