appendTo() prependTo() 是针对元素的内容位置来操作的
insertBefore() insertAfter() 是针对元素位置来操作的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加或移动元素</title>
</head>
<body>
<ul>
<li>我是01</li>
<li>我是02</li>
<li>我是03</li>
<li>我是04</li>
</ul>
<p></p>
<button>appendTo</button>
<button>prependTo</button>
<button>insertBefore</button>
<button>insertAfter</button>
<br>
<img src="../images/1.png" width="20">
<img src="../images/2.png" width="20">
<img src="../images/3.png" width="20">
<img src="../images/4.png" width="20">
</body>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//appendTo() prependTo() 是针对元素的内容位置来操作的
//insertBefore() insertAfter() 是针对元素位置来操作的
$('button').eq(0).on('click',function(){
//appendTo()方法，将节点插入或者移动到目标元素内容的后面
//语法：content.appendTo(target)
//参数：节点
//创建一个新的节点<li>
var li = $('<li>').text('我是新节点01').css('background-color','gray')
//将新节点插入到目标节点后
li.appendTo($('li:eq(0)'))
//返回值是object
//将已存在的目标节点1移动到目标节点2后面
$('img:eq(0)').appendTo('li:eq(0)')
alert(li)
})
$('button').eq(1).on('click',function(){
//prependTo()方法，将节点插入或者移动到目标元素内容的前面
//语法：content.prependTo(target)
//参数：节点
//创建一个新的节点<li>
var li = $('<li>').text('我是新节点02').css('background-color','blue')
//将新节点插入到目标节点后
li.prependTo($('li:eq(2)'))
//将已存在的目标节点1移动到目标节点2后面
$('img:eq(1)').appendTo('li:eq(2)')
})
$('button').eq(2).on('click',function(){
//insertBefore()方法，将节点插入或者移动到目标元素的前面
//语法：content.insertBefore(target)
//参数：节点
//创建一个新的节点<p>
var li = $('<p>').text('我是新节点03').css('background-color','yellow')
//将目标节点插入到指定位置
li.insertBefore('ul')
//将已存在的目标节点1移动到指定位置
$('img:eq(2)').insertBefore('ul')
})
$('button').eq(3).on('click',function(){
//insertAfter()方法，将节点插入或者移动到目标元素内容的后面
//语法：content.insertAfter(target)
//参数：节点
//创建一个新的节点<p>
var li = $('<p>').text('我是新节点04').css('background-color','red')
//将目标节点插入到指定位置
li.insertAfter('ul')
//将已存在的目标节点1移动到指定位置
$('img:eq(3)').insertAfter('ul')
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例