.insertAfter()与after（）
作用：将A添加到B后面 —— A.insertAfter( ' B ' ) / B.after( ' A ' )
【例】点击长条，添加到盒子中第二个长条的下面，代码效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
border: 2px solid black;
padding: 20px;
width: 300px;
margin: 30px 0 0 30px;
}
.box {
width: 280px;
height: 40px;
margin: 0 auto;
margin-bottom: 3px;
border-radius: 20px;
}
.pos {
margin-left: 62px;
margin-top: 5px;
}
.c1 {
background: linear-gradient(to right, cadetblue, steelblue);
}
.c2 {
background: linear-gradient(to right, teal, lightblue);
}
.c3 {
background: linear-gradient(to right, pink, plum);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box c1"></div>
<div class="box c2"></div>
</div>
<div class="box c3 pos"></div>
</body>
<script src="./jquery.js"></script>
<script>
$('.c3').click(function (index) {
$(this).removeClass('pos');
$(this).insertAfter('.c1');
// $('.c1').after(this);
})
</script>
</html>.insertBefore() / before()
作用：将A添加到B前面 —— A.insertBefore( ' B ' ) / B.before( ' A ' )
【例】点击长条，添加到盒子中第一个长条的上面，代码效果如下：
js代码
$('.c3').click(function (index) {
$(this).removeClass('pos');
// $(this).insertBefore('.c2');
$('.c2').before(this);
}).appendTo() / append()
作用：将A添加到B的最后 —— A.appendTo( ' B ' ) / B.append( ' A ' )
【例】点击长条，添加到盒子的最后，代码效果如下：
js代码
$('.c3').click(function (index) {
$(this).removeClass('pos');
// $(this).appendTo('.wrapper');
$('.wrapper').append(this)
}).prependTo / prepend()
作用：将A添加到B的最前面 —— A.prependTo( ' B ' ) / B.prepend( ' A ' )
【例】点击长条，添加到盒子的最前面，代码效果如下：
扫一扫
3550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
