jquery中的DOM操作

jquery中的DOM操作

1.插入到某元素

//插入到某元素的子元素的最后面
var div=$("<div></div>");  //创建div元素
$("body").append(div);
//$("body").append("<div></div>");   //如果直接插入元素,元素的创建不用$符号
//这种写法返回body的jQuery的对象

$("<div></div>").appendTo("body");
// 这种写法返回的是div的jQuery对象


//把div插入到div1的子元素的最前面
$("<div></div>").prependTo(".div1");
$(".div1").prepend("<div></div>");

//   插入在某个元素后面(成为兄弟元素)
 $(".div1").after("<div></div>");
 $("<div></div>").insertAfter(".div1");

// 插入在某个前面(成为兄弟元素)
$(".div1").before("<div class='divs'></div>")
$("<div></div>").insertBefore(".div1");
    

2.wrap 包裹

$("div").wrap("<a></a>");//给每个元素(获取的元素)外面的包裹a标签  多个a标签
$("div").wrapAll("<a></a>");//给所有元素外面包裹一个a标签    一个a标签
$("span").unwrap();//将包裹的父元素删除
$("div").wrapInner("<a></a>");//给每个div的内容包裹一个a标签

3.复制

$("div").clone(false);
$("div").clone(true);
//全部是深复制
// true就是连带事件一起复制
// false不复制事件

4.删除

var div=$(".div1").on("click",function(){
     $(this).css("color","red");
});
div.remove();//删除元素的时候会将所有元素的事件也删除注销
div.detach();//仅删除元素，事件保留
$(".div1").empty();//清除元素的所有子元素和内容

5.替换

//a标签替换div1   全部替换
$(".div1").replaceWith("<a></a>");   
$("<a></a>").replaceAll(".div1");