收藏
批改状态：合格
老师批语：
appendTo() 将内容动态添加到节点的最后面
传入的参数是 $('添加的内容').appendTo('要插入最的节点')
作用：将内容插入到目标节点内容的最后面
prependTo 将内容动态添加到节点的前面
传入的参数是 $('添加的内容').prependTo('要插入最的节点')
作用：将内容插入到目标节点内容的最前面
InsertAfter 将内容插入到目标节点之后, 会跑出目标节点
传入的参数是 $('添加的内容').insertAfter($('节点'))
作用：将内容插入到目标节点的后面
InsertBefore 将内容插入到目标节点之前
传入的参数是 $('添加的内容').InsertBefore($('节点'))
作用：将内容插入到目标节点的前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery节点添加或移动到目标节点</title>
<style type="text/css">
button{
margin-bottom: 20px;
margin-top:20px;
}
div{
text-align: center;
line-height: 50px;
}
.red{
width: 500px;
height: 50px;
background-color: orangered;
}
.green{
width: 500px;
height: 50px;
background-color: lightgreen;
}
.blue{
width: 500px;
height: 50px;
background-color: lightblue;
}
.yellow{
width: 500px;
height: 50px;
background-color: lightyellow;
}
.gray{
width: 500px;
height: 50px;
background-color: gray;
}
.black{
width: 500px;
height: 50px;
background-color: black;
color:white;
}
.pink{
width: 500px;
height: 50px;
background-color: pink;
}
.orange{
width: 500px;
height: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>
<button>appendTo()</button>
<button>prependTo()</button>
<button>insertAfter()</button>
<button>insertBefore()</button>
<div class="gray">我是要被appendTo()移动的节点</div>
<div class="black">我是要被prependTo()移动的节点</div>
<div class="pink">我是要被insertAfter()移动的节点</div>
<div class="orange">我是要被insertBefore()()移动的节点</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
//第一步: 生成节点元素,添加内容,并设置样式
var gray = $('.gray')
//第二点: 将新节点插入到目标节点内容的后面
gray.appendTo($('div').eq(0))
})
$('button').eq(1).on('click',function(){
//第一步: 生成节点元素,添加内容,并设置样式
// var li = $('<li>').css('background-color','lightgreen').html('我是prependTo()新生成的节点2')
//第二点: 将新节点插入到目标节点内容的后面
$('.black').prependTo($('div').eq(0))
})
$('button').eq(2).on('click',function(){
//第一步: 生成节点元素,添加内容,并设置样式
var pink = $('.pink')
//第二点: 将新节点插入到目标节点的后面
pink.insertAfter($('div').eq(0))
})
$('button').eq(3).on('click',function(){
$('.orange').insertBefore($('.green'))
})
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
