![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
jQuery 文档操作:
方法: 1) appendTo() 向目标结尾插入匹配元素集合中的每个元素。
2) prependTo() 向目标开头插入匹配元素集合中的每个元素。
3) insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。
4) insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 文档操作</title>
<style type="text/css">
p{
margin: 0;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
// $(content:要插入的内容).appendTo(selector：把内容追加到哪个元素上)
$(function(){
$('button').eq(0).click(function(){
$('.one').appendTo($('p:eq(0)')).css('color','#FFC0CB')
})
})
// prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容。
// $(content:要插入的内容).prependTo(selector：在何处插入)
$(function(){
$('button').eq(1).click(function(){
$('.two').prependTo($('p:eq(1)')).css('color','#DDDDDD')
})
})
// insertAfter() 方法在被选元素之后插入内容。
// $(content:要插入的内容).insertAfter(selector：在何处插入被选元素)
$(function(){
$('button').eq(2).click(function(){
$($('p:eq(2)').css('color','#F4A460')).insertAfter('.three')
})
})
// insertBefore() 方法在被选元素之前插入内容。
// $(content:要插入的内容).insertBefore(selector ：在何处插入被选元素)
$(function(){
$('button').eq(3).click(function(){
$($('p:eq(3)').css('color','#CD5C5C')).insertBefore('.four')
})
})
</script>
</head>
<body>
<h2>jQuery 文档操作</h2>
<div class="one">appendTo()</div><br>
<div class="two">prependTo()</div><br>
<div class="three">insertAfter()</div><br>
<div class="four">insertBefore()</div><br>
<p>Hello appendTo</p><br>
<p>Hello prependTo</p><br>
<p>Hello insertAfter</p><br>
<p>Hello insertBefore</p><br>
<button>appendTo</button>
<button>prependTo</button>
<button>insertAfter</button>
<button>insertBefore</button>
</body>
</html>点击 "运行实例" 按钮查看在线实例
