jQuery添加元素知识点汇总
编程小白也能轻松理解的jQuery元素操作指南
一、添加元素的核心方法
1. append() – 在末尾添加
功能：在被选元素内部的末尾添加内容（相当于添加最后一个子元素）
// 基础用法
$(“#parent”).append(“<div>新内容</div>”);
// 添加现有元素（会移动元素）
$(“#parent”).append($(“#existingElement”));
$(“#parent”).append(“<div>新内容</div>”);
// 添加现有元素（会移动元素）
$(“#parent”).append($(“#existingElement”));
2. prepend() – 在开头添加
功能：在被选元素内部的开头添加内容（相当于添加第一个子元素）
// 基础用法
$(“#list”).prepend(“<li>列表第一项</li>”);
// 添加多个元素
var newItems = [“<li>苹果</li>”, “<li>香蕉</li>”];
$(“#list”).prepend(newItems.join(“”));
$(“#list”).prepend(“<li>列表第一项</li>”);
// 添加多个元素
var newItems = [“<li>苹果</li>”, “<li>香蕉</li>”];
$(“#list”).prepend(newItems.join(“”));
二、添加兄弟元素的方法
1. after() – 在元素之后添加
功能：在被选元素之后（外部）添加内容（添加为同级兄弟元素）
// 在目标元素后添加新元素
$(“#target”).after(“<div>新兄弟元素</div>”);
// 添加多个元素
$(“#target”).after(“<p>第一段</p>”, “<p>第二段</p>”);
$(“#target”).after(“<div>新兄弟元素</div>”);
// 添加多个元素
$(“#target”).after(“<p>第一段</p>”, “<p>第二段</p>”);
2. before() – 在元素之前添加
功能：在被选元素之前（外部）添加内容（添加为同级兄弟元素）
// 在目标元素前添加新元素
$(“#target”).before(“<div>新兄弟元素</div>”);
// 添加现有元素
var element = $(“<span>现有元素</span>”);
$(“#target”).before(element);
$(“#target”).before(“<div>新兄弟元素</div>”);
// 添加现有元素
var element = $(“<span>现有元素</span>”);
$(“#target”).before(element);
三、反向添加方法
1. appendTo() – 添加到指定元素内
功能：将元素添加到指定元素的内部末尾（与append()方向相反）
// 创建新元素并添加到容器内
$(“<p>新段落</p>”).appendTo(“#container”);
// 添加现有元素到新位置
$(“#existingDiv”).appendTo(“#newContainer”);
$(“<p>新段落</p>”).appendTo(“#container”);
// 添加现有元素到新位置
$(“#existingDiv”).appendTo(“#newContainer”);
2. prependTo() – 前置添加到指定元素内
功能：将元素添加到指定元素的内部开头（与prepend()方向相反）
// 创建新元素并添加到列表开头
$(“<li>新列表项</li>”).prependTo(“#list”);
// 移动现有元素
$(“#specialItem”).prependTo(“#list”);
$(“<li>新列表项</li>”).prependTo(“#list”);
// 移动现有元素
$(“#specialItem”).prependTo(“#list”);
四、HTML内容添加方法
1. html() – 设置内部HTML
功能：设置或获取元素的内部HTML内容（会覆盖原有内容）
// 设置元素的内容
$(“#content”).html(“<h2>新标题</h2><p>新段落</p>”);
// 获取元素的内容
var content = $(“#content”).html();
$(“#content”).html(“<h2>新标题</h2><p>新段落</p>”);
// 获取元素的内容
var content = $(“#content”).html();
2. text() – 设置文本内容
功能：设置或获取元素的文本内容（会解析为纯文本）
// 设置纯文本内容
$(“#textDiv”).text(“这是纯文本内容，<b>不会被解析为HTML</b>”);
// 获取文本内容
var textContent = $(“#textDiv”).text();
$(“#textDiv”).text(“这是纯文本内容，<b>不会被解析为HTML</b>”);
// 获取文本内容
var textContent = $(“#textDiv”).text();
五、方法对比指南
| 方法 | 添加位置 | 方向 | 特点 |
|---|---|---|---|
| append() | 元素内部末尾 | 父元素.append(新内容) | 添加为最后一个子元素 |
| prepend() | 元素内部开头 | 父元素.prepend(新内容) | 添加为第一个子元素 |
| after() | 元素之后（外部） | 目标.after(新内容) | 添加为同级兄弟元素（在之后） |
| before() | 元素之前（外部） | 目标.before(新内容) | 添加为同级兄弟元素（在之前） |
| appendTo() | 元素内部末尾 | 新内容.appendTo(父元素) | append()的反向操作 |
| prependTo() | 元素内部开头 | 新内容.prependTo(父元素) | prepend()的反向操作 |
小白提示：理解添加位置
想象元素是一个盒子：
- 内部添加（append/prepend）：往盒子里面放东西（开头或结尾）
- 外部添加（after/before）：在盒子旁边放东西（前面或后面）
六、动态添加元素实战演示
目标元素
核心知识点总结
- append()/prepend() – 添加子元素（内部添加）
- after()/before() – 添加兄弟元素（外部添加）
- appendTo()/prependTo() – 反向添加方法
- html() – 设置整个元素的内容（覆盖原有内容）
- text() – 设置纯文本内容（不会解析HTML标签）
- 所有方法都可以添加HTML字符串、DOM元素或jQuery对象
- 如果要添加现有元素，元素会被移动到新位置
最佳实践建议
- 创建新元素时，推荐使用
$("<div></div>")而不是字符串拼接 - 添加多个元素时，先创建片段再一次性添加以提高性能
- 使用
.detach()代替.remove()如果需要重新添加元素 - 动态添加元素后，事件绑定可能需要使用事件委托（
on()方法）