先附上完整运行文件。jQuery和CSS引用bootCDN的，方便运行调试
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-xs-6 col-md-offset-3">
<table class="table table-bordered">
<caption>演示表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>游泳</td>
</tr>
<tr>
<td>赵四</td>
<td>男</td>
<td>20</td>
<td>长跑</td>
</tr>
<tr>
<td>王五</td>
<td>女</td>
<td>18</td>
<td>跳舞</td>
</tr>
</tbody>
</table>
</div>
<br>
<div class="col-xs-6 col-md-offset-3">
<button class="col-xs-3 btn btn-primary">给第一行添加颜色</button>
<button class="col-xs-3 btn btn-success">给最后一行添加颜色</button>
<button class="col-xs-3 btn btn-success">点击添加一行</button>
<button class="col-xs-3 btn btn-success">从头插入一行</button>
<br><br>
<button class="col-xs-3 btn btn-success">最后一行后插入一行</button>
<button class="col-xs-3 btn btn-success">最后一行前插入一行</button>
<button class="col-xs-3 btn btn-success">添加爱好</button>
<button class="col-xs-3 btn btn-success">添加外号</button>
<br><br>
<button class="col-xs-3 btn btn-success">添加假名</button>
</div>
<script>
$('button:eq(0)').click(function () {
$('tr:first').addClass('success')
})
$('button:eq(1)').click(function () {
$('tr:last').toggleClass('success')
})
$('button:eq(2)').click(function () {
$('tbody').append('<tr><td>赵四</td><td>女</td><td>22</td><td>尬舞</td></tr>')
$('tr:last').addClass('warning')
})
$('button:eq(3)').click(function () {
$('tbody').prepend('<tr><td>春哥</td><td>女</td><td>22</td><td>唱歌</td></tr>')
$('tr:eq(1)').addClass('warning')
})
$('button:eq(4)').click(function () {
$('tr:last').after('<tr><td>小天</td><td>女</td><td>22</td><td>卖萌</td></tr>')
$('tr:eq(-1)').addClass('warning')
})
$('button:eq(5)').click(function () {
$('tr:last').before('<tr><td>钟声</td><td>女</td><td>42</td><td>新闻联播</td></tr>')
$('tr:eq(-2)').addClass('warning')
})
$('button:eq(6)').click(function () {
$('td:eq(11)').append(' 唱歌')
})
$('button:eq(7)').click(function () {
$('<em> 尼古拉斯</em>').appendTo($('td:eq(4)'))
})
$('button:eq(8)').click(function () {
$('<em>假名 </em>').prependTo($('td:eq(4)'))
})
</script>
</body>
</html>其中在jQuery中选择第几个对象可以使用
$('button：eq(1)') //对象名button eq(1)是选择第二个button ()内其中第一个为0 最后一个为-1或者
$('button：first') //first是第一个 last是最后一个append appendTo的区别
$(selector).append(content) //append 中的content可以是纯文本也可以是HTML，可以使用回调函数 $(content).appendTo(selector) //appendTo中的content注意是在前面，而且只能是HTML，不支持纯文本，不支持回调
append after的区别
after运行前
<ul>
<li>a1</li>
</ul>
<script>
$('ul').after('<li>a2</li>')
</script>after运行后结果
<ul>
<li>a1</li>
</ul>
<li>a2</li>
<script>
$('ul').after('<li>a2</li>')
</script>append 运行前
<ul>
<li>a1</li>
</ul>
<script>
$('ul').append('<li>a2</li>')
</script>append 行后结果
<ul>
<li>a1</li>
<li>a2</li>
</ul>
<script>
$('ul').append('<li>a2</li>')
</script>可以看出after方法中的<li>a2</li>已经跟<ul>是兄弟关系，而append方法中的<li>a2</li>则跟<li>a1</li>是兄弟关系，跟<ul>则是父子关系。
所以可以得出
append/prepend是父子节点操作
after/before则是兄弟节点操作
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
