实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.将节点添加或移动到目标节点</title>
<style type="text/css">
div {
margin: 5px;
/*text-align: center; */
}
#box {
border: 1px solid;
border-color: red;
width: 500px
}
.b {
background-color: lightskyblue;
width: 300px;
height: 30px;
}
.move {
background-color: orange;
width: 300px;
height: 40px;
border: 1px solid blabox;
}
button {
border: none;
height: 50px;
width: 120px;
border-radius: 5px;
background-color: lightgreen;
}
button:hover {
font-size: 1.1em;
background-color: orange;
color: white;
}
</style>
</head>
<body>
<div id="box" >
<div class="b">box1</div>
<div class="b">box2</div>
<div class="b">box3</div>
<div class="b">box4</div>
<div class="b">box5</div>
</div>
<div>
<button>appendTo()</button>
<button>prependTo()</button>
<button>insertAfter()</button>
<button>insertBefore()</button>
</div>
<div id="m1" class="move">我是要被appendTo()移动的box1</div>
<div id="m2" class="move">我是要被prependTo()移动的box2</div>
<div id="m3" class="move">我是要被insertAfter()移动的box3</div>
<div id="m4" class="move">我是要被insertBefore()()移动的box4</div>
<!-- <p style="background-color: orange;width: 300px;">我是要被appendTo()移动的box1</li>
<p style="background-color: orange;width: 300px;">我是要被prependTo()移动的box2</li>
<p style="background-color: orange;width: 300px;">我是要被insertAfter()移动的box3</li>
<p style="background-color: orange;width: 300px;">我是要被insertBefore()()移动的box4</li> -->
</body>
</html>
<!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> -->
<!-- 1.在线引用 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
// 1.appendTo()
// 语法：content.appendTo(target)
// 参数：要添加或者移动到的目标节点；
// 功能：插入到目标元素的结尾（目标元素的子）
// var boxNew = $('<boxNew>').css('background-color','yellow').html('我是appendTo()新添加的box')
// boxNew.appendTo($('#box'))
//移动操作 成为子元素
$('#m1').appendTo($('#box'))
})
$('button').eq(1).on('click',function(){
// 2.prependTo()
// 语法: content.prependTo(target)
// 参数: 要添加或移动的节点
// 功能: 插入到目标元素内容的前面（目标元素的子）
// var boxNew = $('<boxNew>').css('background-color','yellow').html('prependTo()新添加的box')
// boxNew.prependTo($('#box'))
//移动操作 成为子元素
$('#m2').prependTo($('#box'))
})
$('button').eq(2).on('click',function(){
// 3.insertAfter()
// 语法: content.insertAfter(target)
// 参数: 目标节点
// 功能: 插入到目标元素的后面（成为目标元素的兄弟）
// var boxNew = $('<boxNew>').css('background-color','yellow').html('我是insertAfter()新添加的box')
// boxNew.insertAfter($('#box'))
//移动操作 成为兄弟元素
$('#m3').insertAfter($('#box'))
})
$('button').eq(3).on('click',function(){
// 4.insertBefore()
// 语法: content.insertBefore(target)
// 参数: 目标节点
// 功能: 插入到目标元素的前面（成为目标元素的兄弟）
// var boxNew = $('<boxNew>').css('background-color','yellow').html('我是insertBefore()新添加的box')
// boxNew.insertBefore($('#box'))
//移动操作 成为兄弟元素
$('#m4').insertBefore($('#box'))
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
