jquery总结04-DOM节点操作

一般js操作节点

①创建节点（元素文本）document.createElement  innerHTML

②添加属性 setAttribute

③加入文档 appendChild

操作繁琐还有兼容性问题

jquery操作节点

①$('<div class="a">jquery</div>")  直接在$("")里写元素 文本 属性  要注意闭合标签和使用标准的的xhtml格式

②加入文档支持了好多函数

向下添加节点

$('.a').append(content) 在a元素内的最后添加内容  $(content).appendTo('.a')只不过换了一种方式

$('.a').prepend(content) 在a元素内的最开始添加内容  $(content).prependTo('.a')

同级添加节点

$('.a').after(content) 在a元素同级后添加内容  $(content).insertAfter('.a')

$('.a').before(content) 在a元素同级后添加内容  $(content).insertBefore('.a')

向上父及包裹节点

$('.a').wrap("<div></div>") 给匹配的元素每一个外部包一有个html结构  每个都被包裹了 

$('.a').wrapInner("<div></div>") 给匹配的元素每一个内部包裹一个html结构 

$('.a').wrapAll("<div></div>") 给匹配的元素集合外层包裹一个html结构 包裹了最外层的

$('.a').unwrap("<div></div>") 删除父元素

删除节点

$('.a').empty()删除内容，自己还在， 都可以传参数缩小范围 事件也删除

$('.a').remove()都删除了，自己也不在了，都可以传参数缩小范围 事件也删除

var a=$('.a').detach()  都删除了 事件还在

$('body').append(a) 恢复清除的结构

复制节点

$('.a').clone() 复制结构

$('.a').clone(true) 复制结构+事件

替换节点

替换后绑定的时间也会被删除

$('.a').replaceWith(newContent) newContent替换a元素 

$(newContent).replaceAll('.a') newContent替换a元素

 

以上操作，不仅能创建新的dom元素插入，也能对原有的dom元素进行移动，

 var a =$('#content');

 a.insertAfter('.a');

(之前谁会想倒着用吧，倒着可以这么用。)