在 jQuery 中，内部插入方法用于将指定内容添加到目标元素的内部（作为子元素），核心方法包含 append()/appendTo()、prepend()/prependTo() 四组方法，下面我会用代码示例逐一讲解。
用于把内容追加到每个匹配元素的内部末尾（即最后一个子元素）。语法：
$(目标元素).append(要插入的内容)参数：
content：可以是 HTML 字符串、DOM 元素、jQuery 对象；
fn(index, html)：回调函数，返回要插入的内容（index是元素索引，html是元素当前内部 HTML）。
示例：
<ul class="my_ul">
<li>喜欢熬夜</li>
</ul>运行代码：
$('.my_ul').append('<li class=\'myClass\'>喜欢吃夜宵</li>')<ul> 将变成如下：
<ul class="my_ul">
<li>喜欢熬夜</li>
<li class='myClass'>喜欢吃夜宵</li>
</ul>该方法和 append() 功能完全一致（将内容插入到目标内部末尾），但调用主体和目标位置互换（相当于“把内容追加到目标里”）。语法：
$(要插入的内容).appendTo(目标元素)更符合 “内容主动找目标” 的语义，结果和 append() 完全相同。
示例：
// 下面语句和上面 append 效果一致
$('<li class=\'myClass\'>喜欢吃夜宵</li>').appendTo('.my_ul');用于把内容插入到每个匹配元素的内部开头（相当于子元素的第一位）。语法：
$(目标元素).prepend(要插入的内容)示例：
<ul class="my_ul">
<li>喜欢熬夜</li>
</ul>执行代码：
$('.my_ul').prepend('<li class=\'myClass\'>喜欢吃夜宵</li>')<ul> 将变成如下：
<ul class="my_ul">
<li class='myClass'>喜欢吃夜宵</li>
<li>喜欢熬夜</li>
</ul>该方法和 prepend 功能完全一致（内容插入到目标内部开头），主要区别是调用主体和目标位置互换。语法：
$(要插入的内容).prependTo(目标元素)示例：
// 下面代码和上面 prepend 效果一致
$('<li class=\'myClass\'>喜欢吃夜宵</li>').prependTo('.my_ul');快速对比上面介绍的几个方法：
| 方法 | 插入位置 | 语法结构 |
|---|---|---|
| append | 目标内部末尾 | 目标.append (内容) |
| appendTo | 目标内部末尾 | 内容.appendTo (目标) |
| prepend | 目标内部开头 | 目标.prepend (内容) |
| prependTo | 目标内部开头 | 内容.prependTo (目标) |
下面示例通过“点击自己动手试一试”可以尝试各种方法的效果：
<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; }
sup {color: red; font-size: 12px; background: transparent !important;}
ul li { margin: 3px 0;}
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; }
li { border:solid 1px red; box-sizing: border-box; padding: 10px; }
/* 效果 */
.myClass {
box-shadow: inset 0 0 5px red;
}
</style>
</head>
<body>
<div class="app">
<h3>内部插入</h3>
<form>
<p>我的缺点：</p>
<ul class="my_ul">
<li>喜欢熬夜</li>
</ul>
</form>
</div>
<div>
<!-- append(content|fn) 向每个匹配的元素内部追加内容 -->
<button type="button" onclick="
$('.my_ul').append('<li class=\'myClass\'>喜欢吃夜宵</li>');
">append(content|fn) 追加到末尾</button>
<!-- appendTo(content) 把所有匹配的元素追加到另一个指定的元素集合中 -->
<button type="button" onclick="
$('.my_ul').appendTo('p');
">appendTo(content)</button>
<!-- prepend(content|fn) 向每个匹配的元素内部前置内容。 -->
<button type="button" onclick="
$('.my_ul').prepend('<li class=\'myClass\'>喜欢吃夜宵</li>');
">prepend(content|fn) 追加到前面</button>
<!-- prependTo(content) 把所有匹配的元素前置到另一个、指定的元素集合中 -->
<button type="button" onclick="
$('.my_ul').prependTo('p');
">prependTo(content)</button>
</div>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098