jQuery DOM节点的创建插入删除

DOM节点的创建

jQuery节点创建与属性的处理

创建元素节点：

$("<div></div>")

创建为本节点：

$("<div>我是文本节点</div>")

创建为属性节点：

$("<div id='test' class='aaron'>我是文本节点</div>")

DOM节点的插入

DOM内部插入append()与appendTo()

选择器	描述
append(content)	向每个匹配的元素内部追加内容。
appendTo(content)	把所有匹配的元素追加到另一一个、指定的元素元素集合中

总结

append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象

DOM外部插入after()与before()

• before与after都是用来对相对选中元素外部增加相邻的兄弟节点
• 2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面
• 2个方法都支持多个参数传递after(div1,div2,…) 可以参考右边案例代码

DOM内部插入prepend()与prependTo()

区别

• append()向每个匹配的元素内部追加内容
• prepend()向每个匹配的元素内部前置内容
• appendTo()把所有匹配的元素追加到另一个指定元素的集合中
• prependTo()把所有匹配的元素前置到另一个指定的元素集合中

DOM外部插入insertAfter()与insertBefore()

注意事项

• insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；
• insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；

DOM节点的删除

DOM节点删除之empty()的基本用法

例如

<div class="hello"><p>慕课网</p></div>

如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中

//通过empty处理
$('.hello').empty()

//结果：<p>慕课网</p>被移除
<div class="hello"></div>

DOM节点删除之remove()的有参用法和无参用法

//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>慕课网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

DOM节点删除之empty和remove区别

要用到移除指定元素的时候，jQuery提供了empty()与remove([expr])二个方法，两个都是删除元素，但是两者还是有区别
empty方法

• 严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
• empty不能删除自己本身这个节点

remove方法

• 该节点与该节点所包含的所有后代节点将同时被删除
• 提供传递一个筛选的表达式，删除指定合集中的元素