day16-jQuery文档处理
一、前言
今天我们来学习一下文档处理，这个在我们工作也经常用到，比如我们需要插入一行数据，比如说要插入一个标签，等等，这个会经常用到的。下面只是写了经常用的，如果想看更多：http://jquery.cuishifeng.cn/ 的 文档处理 部分。
二、操作的html
<body>
<input id="t1" type="text"/>
<input id="a1" type="button" value="添加">
<input id="a2" type="button" value="删除">
<input id="a3" type="button" value="复制">
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
//js代码
</script>
</body>
效果图：
三、内部插入
3.1、append
说明：向每个匹配的元素内部追加内容。
$("#a1").click(function(){
var v = $("#t1").val();
var temp = "<li>" + v + "</li>";
$("#u1").append(temp); //在尾部添加
});
3.2、prepend
说明：向每个匹配的元素内部前置内容。
$("#a1").click(function(){
var v = $("#t1").val();
var temp = "<li>" + v + "</li>";
$("#u1").prepend(temp); //在前置添加
});
四、外部插入
4.1、after
说明：在每个匹配的元素之后插入内容。
$("#a1").click(function(){
var v = $("#t1").val();
var temp = "<li>" + v + "</li>";
$("#u1").after(temp); //在当前标签的外部的后面插入
});
4.2、before
说明：在每个匹配的元素之前插入内容。
$("#a1").click(function(){
var v = $("#t1").val();
var temp = "<li>" + v + "</li>";
$("#u1").before(temp); //在当前标签的外部的之前插入
});
五、删除
5.1、remove
说明：从DOM中删除所有匹配的元素。
$("#a2").click(function(){
var index = $("#t1").val();
$("#u1 li").eq(index).remove(); //删除所有内容，包括标签
});
5.2、empty
说明：删除匹配的元素集合中所有的子节点。
$("#a2").click(function(){
var index = $("#t1").val();
$("#u1 li").eq(index).empty()；//只清空内容，不删除标签
});
六、复制
6.1、clone
说明：克隆匹配的DOM元素并且选中这些克隆的副本。
$("#a3").click(function(){
var index = $("#t1").val();
var v = $("#u1 li").eq(index).clone(); //复制当前标签
$("#u1").append(v);
});
