实例
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<button>appendTo()</button>
<button>prependTo()</button>
<button>insertAfter()</button>
<button>insertBefore()</button>
<p>移动appendTo</p>
<p>移动prependTo</p>
<p>移动insertAfter</p>
<p>移动insertBefore</p>
</body>
<script>
// 插入到目标元素内容的后面
$('button').eq(0).on('click', function () {
// var li = $('<li>').css('background-color','lightgreen').html('我是appendTo()新生成的节点1')
// li.appendTo($('ul'))
// $('p:first').appendTo($('li:eq(0)'))
$('p:eq(0)').appendTo($('ul'))
})
// 插入到目标元素内容的前面
$('button').eq(1).on('click', function () {
// var li = $('<li>').css('background-color','lightgreen').html('我是prependTo()新生成的节点2')
// li.prependTo($('ul'))
$('p:eq(1)').prependTo($('ul'))
})
// 插入到目标元素内容的后面
$('button').eq(2).on('click', function () {
// var p = $('<li>').css('background-color', 'lightgreen').html('我是insertAfter()新生成的节点3')
// p.insertAfter($('li:eq(2)'))
$('p:eq(2)').insertAfter($('li:eq(2)'))
})
// 插入到目标元素内容的前面
$('button').eq(3).on('click', function () {
// var p = $('<li>').css('background-color','lightgreen').html('我是insertBefore()新生成的节点4')
// p.insertBefore($('li:eq(1)'))
$('p:eq(3)').insertBefore($('li:eq(1)'))
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
1.插入位置:
* 1.1:节点内容的前后
* 1.2:节点的前后
* 2.要插入的节点:
* 2.1: 对于新创建的节点:叫添加操作
* 2.2: 对已存在的节点: 叫移动操作
* 3.所以对应的应该有四个方法
* 3.1:插入到节点内容之后:appendTo()
* 3.2:插入到节点内容之前:prependTo()
* 3.3:插入到节点之后: InsertAfter()
* 3.3:插入到节点之前: InsertBefore() *
