本文共 934 字，大约阅读时间需要 3 分钟。
当我们需要为某些元素添加新元素时，jQuery 提供了多种方法可以选择。这些方法根据插入的位置不同有不同的适用场景。
append()：该方法用于在被选元素的结尾插入内容。例如：
$("div").append("新内容
");这将在原有 div 元素的末尾添加一个 p 元素。
prepend()：该方法用于在被选元素的开头插入内容。例如：
$("新内容
").prepend("div");或者直接调用方法：
$("div").prepend("新内容
");这将在 div 元素的最前面添加一个 p 元素。
after()：该方法用于在被选元素之后插入内容。例如：
$("div").after("新内容
");这将在 div 元素的下一个位置添加一个 p 元素。
before()：该方法用于在被选元素之前插入内容。例如：
$("新内容
").before("div");或者直接调用方法：
$("div").before("新内容
");这将在 div 元素的上一个位置添加一个 p 元素。
考虑一个常见的场景：为下拉列表添加选项文本。以下是 jQuery 的实现方式：
$("select option").append("上海"); // 为每个选项添加对应的城市 或者针对单个元素操作：
$("#shanghai").append("上海");$("#beijing").append("北京");... 为了实现在点击按钮后插入内容，可以利用 jQuery 的事件处理机制。例如：
$("#btn1").click(function() { $(".div6").after("在被选元素之后插入内容");});$("#btn2").click(function() { $(".div6").before("在被选元素之后插入内容");}); 这个代码示例展示了如何通过 after() 和 before() 方法在不同的位置插入内容。
通过以上方法，开发者可以灵活地在 DOM 中添加、移动或删除元素，从而实现页面布局的调整和功能的扩展。
转载地址：http://mxwg.baihongyu.com/