实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.将节点添加或移动到目标节点</title>
<style type="text/css">
li {
background-color: lightskyblue;
width: 300px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<button>appendTo()创建节点添加到目标元素内容后面</button>
<button>appendTo()移动节点添加到目标元素内容后面</button>
<button>prependTo()创建节点插入到目标元素内容前面</button>
<button>prependTo()移动节点插入到目标元素内容前面</button>
<br>
<button>insertAfter()创建节点添加到目标元素后面</button>
<button>insertAfter()移动节点添加到目标元素后面</button>
<button>insertBefore()创建节点插入到目标元素前面</button>
<button>insertBefore()移动节点插入到目标元素前面</button>
<p style="background-color: orange;width: 300px;">我是要被appendTo()移动的节点1</li>
<p style="background-color: orange;width: 300px;">我是要被prependTo()移动的节点2</li>
<p style="background-color: orange;width: 300px;">我是要被insertAfter()移动的节点3</li>
<p style="background-color: orange;width: 300px;">我是要被insertBefore()()移动的节点4</li>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/********************************************************
* 1.插入位置:
* 1.1:节点内容的前后
* 1.2:节点的前后
* 2.要插入的节点:
* 2.1: 对于新创建的节点:叫添加操作
* 2.2: 对已存在的节点: 叫移动操作
* 3.所以对应的应该有四个方法
* 3.1:插入到节点内容之后:appendTo()
* 3.2:插入到节点内容之前:prependTo()
* 3.3:插入到节点之后: InsertAfter()
* 3.3:插入到节点之前: InsertBefore() *
*********************************************************/
$('button').eq(0).on('click',function(){
/**
* 1.appendTo()
* 语法: content.appendTo(target)
* 参数: 要添加或移动到的节点
* 功能: 插入到目标元素内容的后面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('我是appendTo()新生成的节点1')
//第二点: 将新节点插入到目标节点内容的后面
li.appendTo($('ul'))
})
$('button').eq(1).on('click',function(){
//2.移动操作
$('p:first').appendTo($('ul'))
})
///////////////////////////////////////////////////////////////
$('button').eq(2).on('click',function(){
/**
* 2.prependTo()
* 语法: content.prepend(target)
* 参数: 要添加或移动的节点
* 功能: 插入到目标元素内容的前面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('我是prependTo()新生成的节点2')
//第二点: 将新节点插入到目标节点内容的后面
li.prependTo($('ul'))
})
$('button').eq(3).on('click',function(){
//2.移动操作
$('p:eq(1)').prependTo($('ul'))
})
///////////////////////////////////////////////////////////////
$('button').eq(4).on('click',function(){
/**
* 3.insertAfter()
* 语法: content.after(target)
* 参数: 要插入的节点
* 功能: 插入到目标节点的后面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var p = $('<li>').css('background-color','lightgreen').html('我是insertAfter()新生成的节点3')
//第二点: 将新节点插入到目标节点的后面
p.insertAfter($('li:eq(1)'))
})
$('button').eq(5).on('click',function(){
//2.移动操作
// //移动到第2个<li>之后
$('p:eq(2)').insertAfter($('li:eq(1)'))
})
///////////////////////////////////////////////////////////////
$('button').eq(6).on('click',function(){
/**
* 4.InsertBefore()
* 语法: content.insertBefore(target)
* 参数: 要插入的节点
* 功能: 插入到目标元素的前面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
//var p = $('<li>').css('background-color','lightgreen').html('我是insertBefore()新生成的节点4')
//第二点: 将新节点插入到目标节点的后面
// p.insertBefore($('ul'))
//插入到第3个<li>之前
//p.insertBefore($('li:eq(2)'))
$('<li>').css('background-color','lightgreen').html('我是insertBefore()新生成的节点4').insertBefore($('li:eq(2)'))
})
$('button').eq(7).on('click',function(){
//2.移动操作
//移动到第3个<li>之前
$('p:eq(3)').insertBefore($('li:eq(2)'))
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
