jQuery 的外部插入方法用于将内容添加到目标元素的外部（作为同级兄弟元素），核心包含 after/insertAfter、before/insertBefore 四组方法，这类方法是在元素的“旁边”插入（而非内部），下面将用代码示例逐一讲解。
用于在每个匹配元素的后面（下一个兄弟位置）插入内容。语法：
$(目标元素).after(要插入的内容)参数：
content：HTML 字符串、DOM 元素、jQuery 对象。
fn(index, html)：回调函数，返回要插入的内容（index是元素索引，html是元素当前的 HTML）。
示例：
<form>
<p id="row1">ID=row1</p>
</form>
<form>
<p class="myClass">class=myClass</p>
<p class="myClass">class=myClass</p>
</form>运行代码：
$('#row1').after($('.myClass'))将所有拥有 myClass 类的元素添加到 id 为 row1 元素的后面，效果如下：
<form>
<p id="row1">ID=row1</p>
<p class="myClass">class=myClass</p>
<p class="myClass">class=myClass</p>
</form>
<form></form>该方法的功能和 after 完全一致（内容插在目标元素后面），但调用主体和目标位置互换（相当于“把内容插到目标后面”）。语法：
$(要插入的内容).insertAfter(目标元素)示例：
<form>
<p id="row1">ID=row1</p>
</form>
<form>
<p class="myClass">class=myClass</p>
<p class="myClass">class=myClass</p>
</form>运行代码：
$('#row1').insertAfter($('.myClass'))将 id 为 row1 的元素添加到所有类为 myClass 元素的后面，效果如下：
<form></form>
<form>
<p class="myClass">class=myClass</p>
<p id="row1">ID=row1</p>
<p class="myClass">class=myClass</p>
<p id="row1">ID=row1</p>
</form>用于在每个匹配元素的前面（上一个兄弟位置）插入内容。语法：
$(目标元素).before(要插入的内容)注意，参数 和 after完全一致（content / 回调函数）。
示例：
<form>
<p id="row1">ID=row1</p>
</form>
<form>
<p class="myClass">class=myClass</p>
<p class="myClass">class=myClass</p>
</form>运行代码：
$('#row1').before($('.myClass'))将所有类为 myClass 的元素添加到 id 为 row1 元素的前面。效果如下：
<form>
<p class="myClass">class=myClass</p>
<p class="myClass">class=myClass</p>
<p id="row1">ID=row1</p>
</form>
<form></form>方法的作用和 before 完全一致（内容插在目标元素前面），调用主体和目标位置互换。语法：
$(要插入的内容).insertBefore(目标元素)示例：
<form>
<p id="row1">ID=row1</p>
</form>
<form>
<p class="myClass">class=myClass</p>
<p class="myClass">class=myClass</p>
</form>运行代码：
$('#row1').insertBefore($('.myClass'))将 id 为 row1 的元素插入到所有类为 myClass 元素的前面。效果如下：
<form></form>
<form>
<p id="row1">ID=row1</p>
<p class="myClass">class=myClass</p>
<p id="row1">ID=row1</p>
<p class="myClass">class=myClass</p>
</form>下表将对照前面几个方法进行简单对别，方便记忆：
| 方法 | 插入位置 | 语法结构 |
|---|---|---|
| after() | 目标元素后面 | 目标.after (内容) |
| insertAfter() | 目标元素后面 | 内容.insertAfter (目标) |
| before() | 目标元素前面 | 目标.before (内容) |
| insertBefore() | 目标元素前面 | 内容.insertBefore (目标) |
下面示例通过“点击自己动手试一试”可以尝试各种方法的效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
h3 { font-size: 18px; }
form { border:solid 1px blue; box-sizing: border-box; padding: 10px;}
p { border:solid 1px green; box-sizing: border-box; padding: 10px; }
/* 效果样式 */
.myClass {
box-shadow: inset 0 0 5px red;
}
</style>
</head>
<body>
<div class="app">
<h3>外部插入</h3>
<form>
<p id="row1">ID=row1</p>
</form>
<form>
<p class="myClass">class=myClass</p>
<p class="myClass">class=myClass</p>
</form>
</div>
<div>
<!-- after(content|fn) 在每个匹配的元素之后插入内容 -->
<button type="button" onclick="
$('#row1').after($('.myClass'));
">$('#row1').after($('.myClass'))</button>
<!-- before(content|fn) 在每个匹配的元素之前插入内容 -->
<button type="button" onclick="
$('#row1').before($('.myClass'));
">$('#row1').before($('.myClass'))</button>
<!-- insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面 -->
<button type="button" onclick="
$('#row1').insertAfter($('.myClass'));
">$('#row1').insertAfter($('.myClass'))</button>
<!-- insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面 -->
<button type="button" onclick="
$('#row1').insertBefore($('.myClass'));
">$('#row1').insertBefore($('.myClass'))</button>
</div>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098