删除节点

原生:
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('<li style="background: #ffaaff;"></li>')
	})
})

点击按钮前:

removeChild 删除子节点 删除父节点及其子节点_数据


点击按钮后:

removeChild 删除子节点 删除父节点及其子节点_数据_02

内包

wrapInner(wrappingElement) 或 wrapInner(wrappingFunction)

该方法有点类似为所匹配元素添加一个子元素
例:点击按钮为a的内部包裹上li标签

$('button').click(function() {
	$('a').wrapInner('<li style="background: #ffaaff;"></li>')
})

点击按钮前:

removeChild 删除子节点 删除父节点及其子节点_数据

点击按钮后:

removeChild 删除子节点 删除父节点及其子节点_jQuery_04


总包

为所有匹配的元素包裹上一层元素

wrapAll(wrappingElement)

例:

$('button').click(function() {
	$('a').wrapAll('<li style="background: #ffaaff;"></li>')
})

点击按钮前:

removeChild 删除子节点 删除父节点及其子节点_数据


点击按钮后:

removeChild 删除子节点 删除父节点及其子节点_removeChild 删除子节点_06


卸包

unwrap()方法与wrap()方法功能相反,能够将匹配元素的父级元素删除,保留自身在原来的位置,该方法没有参数