十、节点操作

html内容
html()
text()

//把d2中的html替换d1中
$("#d1").html($("#d2").html());  

//text方法仅仅只是获取文本，而不会获取标签信息
$("#d1").html($("#d2").text());

 

 

节点处理
除了clone之外，所有的节点处理完成之后返回的都是原包装集
append,appendTo；
prepend,prependTo
before,inertBefore
after,insertAfter

//在d1这个元素中插入d3这个元素(在d1节点的最后插入)，插入之后，d3就消失
//$("#d1").append($("#d3"));
//如果原始节点是数组，会在多个节点中插入
//$(".ddd").append($("#d3"));

//把d1插入到d3中,注意append和appendTo的区别
//$("#d1").appendTo($("#d3"));

//包装集为.ddd
//$(".ddd").appendTo($("#d3")).css("color","#f00");
//包装集为d3
//$("#d3").append($(".ddd")).css("color","#f00");

//在节点前面插入(在内部插入)
//$("#d1").prepend($("#d3"));

//在d1后面插入d3(在外部插入),insertAfter和appendTo类似，方向相反
//$("#d1").after($("#d3"));

//在d1的前面插入d3,insertBefore和insertAfter类似
//$("#d1").before($("#d3"));


wrap,wrapAll,wrapInner

//在d1的位置用d3来包裹之后，替换d1
// $("#d1").wrap($("#d3"));

//两个元素都会被包裹
//$(".ddd").wrap($("#d3"));

//取消包裹
//$("ul").unwrap();

//把一组元素包裹进去
//$(".ddd").wrapAll($("#d3"));

//用d3包裹了d1中的值之后，才插入到d1中
//$("#d1").wrapInner($("#d3"));

remove replace

//移除元素，d2就不在了
//$("#d2").remove();

//清空了d3中的所有元素
//$("#d3").empty();

//从包装集中删除满足条件的元素
//$("#d3 li").detach("li:contains('悟空')").css("color","#f00");

//此时返回的包装集是d1,remove的时候就是remove了d1，还剩下hello,
//变相完成了节点的替换
//$("#d1").before("<div>hello</div>").remove().css("color","#f00");

//replaceWith方法就是基于以上原理实现的，此时包装集没有任何意义，指向了被移除的元素
// $("#d1").replaceWith("<div>ok</div>").css("color","#f00");