JQ DOM节点篇

嗯，今天呢还是跟着李炎恢老师的视频进行下一篇，有关节点的操作，主要包含以下几种方法！
创建，克隆，删除，下面就一个一个举例子！！

创建呢很简单

 var box=$('<div id="box"></div>')

创建完之后并不是直接显示到页面中，需要我们手动的插入到页面中！
那我们就需要一个插入的方法

//首先是append方法$('body').append(box)            //插入到body内部后面插入//可以用传入function$('body').append(function(index,html){//索引和原本里面的内容    return '<p>DOM<p>';})//appendTo将指定元素移到指定元素内容的后面$('strong').appendTo('div')//将原来同级的放进div里，不用创建节点//prepend方法$('body').prepend(box)//这个也可以用function的$('body').prepend(function(index,html){//索引和原本里面的内容    return '<p>DOM<p>';})//prependTo方法//跟上面没啥区别，不详细写了//after方法$('div').after('<p>DOM<p>')//实在外面的同级后面添加//他的function方法就不写了，都一样的//before方法$('div').before('<p>DOM<p>')//实在外面的同级前面添加//他的function方法就不写了，都一样的//insertAfter方法$('strong').insertAfter('div')//移入是不用创建节点的//insertBefore方法$('strong').insertBefore('div')

包裹节点是向元素包裹一层HTML代码或者是包裹一层DOM对象节点

$('div').wrap('<strong><strong>')//在div外层就会多了这个标签$('div').wrap($('strong').get(0))//里面传入的是原生JS节点$('div').wrap($(document.createElement('strong'))//也可以使用原生方法$('div').wrap(function(index){    return '<strong></strong>';})//unwrap是用来移除的$('div').unwrap()//当然如果你是有两层包裹的话，需要两个//wrapAll方法$('div').wrapAll('<strong><strong>')//如果有多个div就会被一对<strong>包裹，而wrap是分别给每一个包裹$('div').wrapAll($(document.createElement('strong'))//wrapInner$('div').wrapInner('<strong><strong>')//是在里面包裹，他也有wrap一样的其他传参，就不多写了

复制节点

$('div').clone().appenTo('body')//如果传入true参数，就会把复制节点的事件处理克隆下来

删除节点

$('div').remove('.box')//可以传参的，删除某些特定的，并且删除后再回复事件处理不存在$('div').detach('.box')//删除后在添加保留事件处理$('div').empty()//清空，但div保留

替换

$('div').replaceWith('<span>DOM</span>')$('<span>DOM</span>').replaceAll('div')//都是将div替换成span