在前端开发中，我们经常需要修改网页上的 DOM 元素。jQuery 是一个广泛使用的 JavaScript 库，它提供了一系列方便的方法来操作 DOM 元素。本文将介绍其中几个常用的方法：append()、prepend()、before() 和 after()。
append()
append() 方法可以在指定元素的末尾添加新的内容。这个操作可以是一个 HTML 字符串、DOM 元素或 jQuery 对象。
// 在 <ul> 最后添加一个新的列表项
$("ul").append("<li>New item</li>");
// 在 <div id='container'> 最后添加一个新的 <p> 标签
$("#container").append("<p>Hello, world!</p>");prepend()
与 append() 相对应的是 prepend() 方法，它可以在指定元素的开头添加新的内容。
// 在 <ul> 开头添加一个新的列表项
$("ul").prepend("<li>New item</li>");
// 在 <div id='container'> 开头添加一个新的 <p> 标签
$("#container").prepend("<p>Hello, world!</p>");before()
before() 方法可以在指定元素之前添加新的内容。这个操作同样可以是一个 HTML 字符串、DOM 元素或 jQuery 对象。
// 在 <ul> 之前添加一个新的 <h1> 标题
$("ul").before("<h1>My List</h1>");
// 在 <p> 之前添加一个新的 <img> 图片
$("p").before("<img src='image.jpg' alt='An image'>");after()
与 before() 相对应的是 after() 方法，它可以在指定元素之后添加新的内容。
// 在 <ul> 之后添加一个新的 <p> 段落
$("ul").after("<p>End of the list.</p>");
// 在 <img> 之后添加一个新的 <a> 链接
$("img").after("<a href='https://example.com'>Read more</a>");这些方法不仅可以用于添加新的内容，也可以用于移动已有的内容。例如，我们可以使用 appendTo() 和 prependTo() 方法将现有的元素添加到其他元素中：
// 将 <li> 移动到 <ul> 中
$("li").appendTo("ul");
// 将 <p> 移动到 <div id='container'> 中
$("p").prependTo("#container");总之，jQuery 提供了许多方便的方法来操作 DOM 元素。掌握这些方法可以使我们更快、更轻松地完成前端开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9769
