简介
在使用 jQuery 进行 DOM 操作时，我们经常需要在元素之后插入内容。jQuery 提供了 after() 方法来实现这个目的。after() 方法可以在每个选定元素之后插入指定的内容，这样可以轻松地添加新的元素、文本或 HTML 代码。
使用语法
after() 方法使用的基本语法如下：
$(selector).after(content)
selector：表示要选择的元素，可以使用标签名、类名、ID 等选择器。content：要插入的内容，可以是新的元素、文本或 HTML 代码。
示例
插入新的元素
<div class="container">
<h2>jQuery - Manipulation操作</h2>
<p>这是一个段落。</p>
</div>
$(document).ready(function(){
// 在每个段落之后插入一个新的 div 元素
$("p").after("<div class='new-div'>这是新的 div 元素。</div>");
});
上述示例中，将在每个 <p> 元素之后插入一个新的 <div> 元素，并添加了一个类名为 new-div。
插入纯文本
<div class="container">
<h2>jQuery - Manipulation操作</h2>
<p>这是一个段落。</p>
</div>
$(document).ready(function(){
// 在每个段落之后插入文本内容
$("p").after("这是插入的文本。");
});
上述示例中，将在每个 <p> 元素之后插入纯文本内容。
插入 HTML 代码
<div class="container">
<h2>jQuery - Manipulation操作</h2>
<p>这是一个段落。</p>
</div>
$(document).ready(function(){
// 在每个段落之后插入一段 HTML 代码
$("p").after("<b>这是插入的粗体文本。</b>");
});
上述示例中，将在每个 <p> 元素之后插入一段包含粗体文本的 HTML 代码。
总结
after() 方法是 jQuery 中一个非常有用的 DOM 操作方法，它可以在每个选定元素的后面插入新的内容。无论是插入新的元素、文本还是 HTML 代码，after() 方法都可以满足你的需求。通过合理运用 after() 方法，可以轻松地进行 DOM 操作，改变页面布局和内容。
希望本文能够帮助你理解和使用 after() 方法，为你的项目开发带来便利。感谢阅读！
参考链接：
本文来自极简博客，作者：网络安全守护者，转载请注明原文链接：jQuery - Manipulation操作 - after在每个匹配的元素之后插入内容
