1，添加节点
内部插入：
将元素添加到指定元素内部的最后
append(content|fn)
appendTo(content)
将元素添加到指定元素内部的最前面
prepend(content|fn)
prependTo(content)
外部插入：
将元素添加到指定元素外部的后面
after(content|fn)
insertAfter(content)
将元素添加到指定元素外部的前面
before(content|fn)
insertBefore(content)
$("button").click(function(){
//创建一个节点
var $li = $("<li>新增的li</li>");
//添加节点
//$("ul").append($li);
//$("ul").prepend($li);
//$li.appendTo("ul");
//$li.prependTo("ul"):
//$("ul").after($li);
//$("ul").before($li);
//$li.insertAfter("ul");
//$li.insertBefore("ul"):
});
<button>添加节点</button>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ul>
2，删除节点
remove([expr])删除指定元素
empty()删除指定元素的内容和子元素，指定元素自身不会被删除
datach([expr])删除指定元素
$("button").click(function(){
//$("div").remove();
//$("div").empty();
//$("div").datach();
//$("li").remove(".item");
//$("li").empty(".item");
$("li").datach(".item");
});
<button>删除节点</button>
<ul>
<li class="item">第一个li</li>
<li>第二个li</li>
<li class="item">第三个li</li>
<li>第四个li</li>
<li class="item">第五个li</li>
</ul>
<div>
我是div
<p>我是段落</p>
</div>
3，替换节点
替换所有匹配元素为指定的元素
replaceWith(content|fn)
replaceAll(selector)
$("button").click(function(){
//新建节点
var $h4 = $("<h4>标题六</h4>");
//替换节点
//$("h1").replaceWith($h4);
$h4.replaceAll("h1");
});
<button>替换节点</button>
<h1>标题一</h1>
<h1>标题一</h1>
<p>段落</p>
4，复制节点
clone([Even[,deepEven]])
false为浅复制，true为深复制
浅复制只会复制元素，不会复制元素事件
浅复制会复制元素，还会复制元素事件
$("button").eq(0).click(function(){
//浅复制一个元素
var $li = $("li:first").clone(false);
//将复制的元素添加到ul中
$("ul").append($li);
});
$("button").eq(1).click(function(){
//深复制一个元素
var $li = $("li:first").clone(true);
//将复制的元素添加到ul中
$("ul").append($li);
});
鉴定两者区别：
$("li").click(function(){
alert($(this).html());
});
<button>浅复制节点</button>
<button>深复制节点</button>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
<li>第五个li</li>
</ul>
