操作DOM（二）：删除节点、、复制节点、替换节点
删除节点
原生：
removeChild()删除指定的节点及其包含的所有子节点，并返回这些删除的内容
nodeObject.removeChild(node)
nodeObject表示父节点对象，node表示要删除的子节点
例：将div标签中的p标签移除，然后将移除的p标签添加到div元素的后面，使其变成div标签的兄弟
var div = document.querySelector('div');
var p = document.querySelector('div p');
var p1 = div.removeChild(p);
div.parentNode.insertBefore(p1, div.nextSibling)
jQuery：
1、remove([selector])
将匹配元素从DOM中移除。该方法将同时移除元素内部的一切，包括绑定的事件及与改元素相关的jQuery数据。
参数selector表示一个选择表达式用来过滤匹配的将被移除的元素，一般情况用不到
该方法返回删除的元素
例：单击按钮删除所有的段落文本
<p>段落文本1</p>
<div>我不是段落文本</div>
<p>段落文本2</p>
<button>清除段落文本</button>
<script type="text/javascript">
$('button').click(function() {
$('p').remove();
})
</script>
2、empty()
该方法没有参数，表示将直接删除匹配元素包含的所有内容。
与remove的区别是：remove会将标签自身也删除，而empty只是情况标签内的元素，标签本身将保留
例：清空段落文本内所有内容，但是没有删除p元素
$('button').click(function() {
$('p').empty();
})
3、detach([expr])
参数expr是一个选择表达式，将需要移除的元素从匹配的元素中过滤出来。该参数省略时将移除所有匹配的元素
detach()方法与remove()方法一样，但是区别是detach()方法会保存所有jQuery数据与被移走的元素相关联，所有绑定在元素上的事件、附加的数据等都会保留下来
复制节点
原生：cloneNode()方法可以复制节点
nodeObject.cloneNode(include_all)
参数include_all为布尔值，如果为true，那么将会复制原节点，以及所有子节点；为false时，仅复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。
注：复制的元素不拥有事件处理函数，但是拥有元素标签内包含的事件属性
jQuery：clone
clone([withDataAndEvents])
参数withDataAndEvents是一个布尔值，用来设置是否复制事件处理函数等数据
替换节点
原生：replaceChild()方法可以替换节点
nodeObject.replaceChild(new_node,old_node)
如果替换成功，则返回被替换的节点；如果替换失败，则返回null
jQuery：
1、replaceWith()
replaceWith()能够将所有匹配的元素替换成指定的HTML或DOM元素
replaceWith(newContent) 或 replaceWith(function)
参数newContent表示用来插入的内容，可以是HTML字符串、DOM元素或jQuery对象。
参数function返回HTML字符串，用来替换的内容
例：点击按钮，将按钮替换为p标签
<body>
<p id="p">我是新来的</p>
<button>按钮</button>
<script type="text/javascript">
$(function() {
$('button').click(function() {
$(this).replaceWith($('#p'))
})
})
</script>
</body>
注意：
1、该方法将会用选中的元素替换目标元素，此操作是移动，而不是复制，以上面为例最后只会剩下p标签
2、该方法返回的jQuery对象是与被移走的元素相关联，而不是新插入的元素，在使用链式语法时要注意
2、replaceAll()
replaceAll(selector)
参数selector表示jQuery选择器字符串，用于查找所要被替换的元素
replaceAll()与replaceWith()是一对相反操作，类似：$A.replaceAll($B)（A替换掉所有的B）等于 $B.replaceWith($A)（B被A替换）
例：点击按钮，所有的p标签都被替换为按钮
<body>
<p>段落1</p>
<p>段落2</p>
<button>按钮</button>
<script type="text/javascript">
$(function() {
$('button').click(function() {
$(this).replaceAll('p')
})
})
</script>
</body>
包裹元素
外包
wrap()方法能够在每一个匹配的元素外层包裹上一层惠特米勒元素
wrap(wrappingElement) 或 wrap(wrappingFunction)
参数wrappingElement表示一个惠特米勒片段、选择表达式、jQuery对象，或者DOM元素，用来包裹在匹配元素的外层。参数wrappingFunction表示一个用来包元素的回调函数
例：点击按钮为每个匹配的a标签包裹上一个li标签
$(function() {
$('button').click(function() {
$('a').wrap('')
})
})
点击按钮前：
点击按钮后：
内包
wrapInner(wrappingElement) 或 wrapInner(wrappingFunction)
该方法有点类似为所匹配元素添加一个子元素
例：点击按钮为a的内部包裹上li标签
$('button').click(function() {
$('a').wrapInner('')
})
点击按钮前：
点击按钮后：
总包
为所有匹配的元素包裹上一层元素
wrapAll(wrappingElement)
例：
$('button').click(function() {
$('a').wrapAll('')
})
点击按钮前：
点击按钮后：
卸包
unwrap()方法与wrap()方法功能相反，能够将匹配元素的父级元素删除，保留自身在原来的位置，该方法没有参数