一、内部插入
append()
append()向每个匹配的元素内部追加内容，这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似
//在div中追加了一个p标签
$("#div1").append($("<p>"));appendTo()
把所有匹配的元素追加到另一个指定的元素元素集合中，实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中
//把标签p追加到div中
$("<p>").appendTo($("#div1"));prepend()
向每个匹配的元素内部前置内容，这是向所有匹配元素内部的开始处插入内容的最佳方式
//往div内容的前面插入了一个p标签
$("#div1").prepend($("<p>"));prependTo()
把所有匹配的元素前置到另一个、指定的元素元素集合中，实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中
//把p标签插入到div内容的前面
$("<p>").prependTo($("#div1"));二、外部插入
after()
在每个匹配的元素之后插入内容
//在div后面插入了一个p标签
$("#div1").after($("<p>"));before()
在每个匹配的元素之前插入内容
//在div前面插入了一个p标签
$("#div1").after($("<p>"));insertAfter()
把所有匹配的元素插入到另一个、指定的元素元素集合的后面，实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面
//把p标签插入到div后面
$("<p>").insertAfter($("#div1"));insertBefore()
把所有匹配的元素插入到另一个、指定的元素元素集合的前面，实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面
//把p标签插入到div前面
$("<p>").insertBefore($("#div1"));三、包裹
wrap()
把所有匹配的元素用其他元素的结构化标记包裹起来
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质
这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数
因此，如果要添加文本应该在包裹完成之后再行添加
//把所有的段落用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>");remove()
从DOM中删除所有匹配的元素
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素
但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除
//从DOM中把所有段落删除
$("p").remove();点击添加删除列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.prependLie,.removeLie{
width: 200px;
height: 40px;
margin: 10px 100px;
border-radius: 15px;
border: 2px solid rgba(192,192,192,0.8);
font-family: "楷体";
font-size: 20px;
outline: none;
}
li{
height: 30px;
background: #DCDCDC;
list-style: none;
margin-top: 10px;
line-height: 30px;
padding: 10px;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".prependLie").on("click",function(){
$("ul").prepend("<li>列表$$</li>");
})
$(".removeLie").on("click",function(){
$("li").remove("li:eq(0)");
})
})
</script>
</head>
<body>
<button class="prependLie">添加一列</button>
<button class="removeLie">删除一列</button>
<ul></ul>
</body>
</html>
