JQuery DOM节点操作

1. 创建、移动节点

var box = $("<div class="box"></div>");   //创建节点

$("body").append(box);  //插入节点

$("div").append("<strong></strong>");  //插入节点

$("div").append(function(index, html) {

return "<strong></strong>";    //html代表原本里面的内容

])

box.appendTo("body");   //将节点box移入body，不需要创建节点

$("div").prepend("<strong></strong>");  //插入节点，插入到内容的前面

$("div").prepend(function(index, html) {

return "<strong></strong>";    //html代表原本里面的内容

])

box.prependTo("body");   //插入的内容前面

$("div").after("<strong></strong>");  //插入节点，插入到同级节点的下面

$("div").after(function(index, html) {

return "<strong></strong>";    //html代表原本里面的内容

])

$("div").before("<strong></strong>");  //插入节点，插入到同级节点的上面

$("div").before(function(index, html) {

return "<strong></strong>";    //html代表原本里面的内容

])

box.insertBefore("div");  //移动box到div上面

box.insertAfter("div");   //移动box到div的下面

2. 包裹、复制、替换、删除节点

$("div").wrap("<strong class=‘bbb’>123456</strong>");  //使用strong标签包裹div元素

$("div").wrap(document.getElementById("strong"));  //使用dom元素包裹div元素

$("div").wrap(function(index) {

return "<strong></strong>";

})

$("div").unwrap();   //移除掉一层包裹

$("div").wrapAll("<strong></strong>");  //使用strong标签包含所有div元素

$("div").wrapAll(document.createElement("strong"));  //同上

$("div").wrapInner("<strong></strong>");   //使用strong包含div内部元素

$("div").wrapInner(document.createElement("strong"));   //使用strong包含div内部元素

$("div").wrappInner(function(index) {

return ""<strong></strong>";

})

$("div").clone().appentTo("body");  //克隆节点

$("div").clone(true).appentTo("body");  //克隆节点，带事件处理函数

$("div").remove();  //删除节点

$("div').remove("#box");  //删除id为box的div

$("div").detach("#box");  //也是删除节点，但是保留节点上的事件处理函数

$("div").empty();  //删除子节点

$("div").replaceWith("<span></span>")  //替换节点，里面的内容页被替换掉

$("<span></span>').replaceAll("div");   //同上，替换掉之后事件处理函数将被删除