收藏
批改状态：未批改
老师批语：
今天学习了appendTo(),prependTo(),insertAfter(),insertBefore()的使用，基本语法是content.appendTo(target)，参数是要添加或者移动的元素，功能是将对应元素插入到目标元素的前面或者后面，注意区分插入时是插入到目标元素的里面还是外面，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将节点添加或移动到目标节点</title>
<style type="text/css">
div{
width: 250px;
border: 2px solid red;
margin: 10px 0;
}
img{
width: 100%;
height: 50px;
vertical-align: top;
}
</style>
</head>
<body>
<div><img src="1.png" alt="1"></div>
<div><img src="2.png" alt="2"></div>
<div><img src="3.png" alt="3"></div>
<div><img src="4.png" alt="4"></div>
<div><img src="5.png" alt="5"></div>
<button>appendTo</button>
<button>prependTo</button>
<button>insertAfter</button>
<button>insertBefore</button>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).click(function(){
// 生成新的节点,添加内容,并设置样式，插入到第一个div块中的元素后面
// $('<p>').css('background-color','skyblue').html('我是新插入的节点1').appendTo($('div:eq(0)'))
// 将已经存在的节点移动到第一个div块中的元素后面
$('div:eq(4)').appendTo('div:eq(0)')
})
$('button').eq(1).click(function(){
// 生成新的节点,添加内容,并设置样式，插入到第二个div块中的元素前面
// $('<p>').css('background-color','skyblue').html('我是新插入的节点2').prependTo($('div:eq(1)'))
// 将已经存在的节点移动到第二个div块中的元素前面
$('div:eq(4)').prependTo('div:eq(1)')
})
$('button').eq(2).click(function(){
// 生成新的节点,添加内容,并设置样式，插入到第三个div块的后面
// $('<p>').css('background-color','skyblue').html('我是新插入的节点3').insertAfter($('div:eq(2)'))
// 将已经存在的节点移动到第三个div块的后面
$('div:eq(4)').insertAfter('div:eq(2)')
})
$('button').eq(3).click(function(){
// 生成新的节点,添加内容,并设置样式，插入到第四个div块的前面
// $('<p>').css('background-color','skyblue').html('我是新插入的节点4').insertBefore($('div:eq(3)'))
// 将已经存在的节点移动到第一个div块的前面
$('div:eq(4)').insertBefore('div:eq(3)')
})
</script>点击 "运行实例" 按钮查看在线实例
总结：
1.当使用appendTo(),prependTo(),insertAfter(),insertBefore()创建新元素，并插入时，效果如下图所示：
appendTo()是插入到对应的元素里面的后面，prependTo()是插入到对应的元素里面的前面，insertAfter()是插入到对应的元素外面的后面，insertBefore()是插入到对应的元素外面的前面。
2.当使用appendTo()将原有的元素插入时，是插入到对应的元素里面的后面
3.当使用prependTo()将原有的元素插入时，是插入到对应的元素里面的前面
4.当使用insertAfter()将原有的元素插入时，是插入到对应的元素外面的后面
5.当使用insertBefore()将原有的元素插入时，是插入到对应的元素外面的前面
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
