jQuery DOM节点操作

学习要点

• 创建节点
• 插入节点
• 包裹节点
• 节点操作

---

创建节点

var box = $('
节点
');
//创建一个节点
$('body').append(box);
//将节点插入到元素内部

插入节点

内部插入节点方法汇总

• append(content) 向指定元素内部后面插入节点content

• append(function(index,val){})
  使用匿名函数向指定元素内部后面插入节点

• appendTo(content)
  将指定元素移入到指定元素content内部后面

• prepend(content)
  向指定元素content内部的前面插入节点

• prepend(function(index,val){})
  使用匿名函数向指定元素内部的前面插入节点

• prependTo(content)
  将指定元素移入到指定元素content内部前面

    //$("#div1").append(box);    //向指定元素内部的后面插入位置
    //box.appendTo($('#div1'));   //把节点插入到指定元素的内部最后的位置
    //box.prependTo($("#div1"));    //把节点插入到指定元素的内部最前面的位置
    $("#div1").prepend(box);            //向指定元素内部的前面插入位置

外部插入节点的方法

• after(content) 向指定元素的外部后面插入节点content

• before(content)向指定元素的外部前面插入节点content

• insertAfter(content) 将指定节点移到指定元素content外部的后面

• insertBefore(content)将指定节点移到指定元素content外部的前面

$("div").after('节点');
//向div的同级节点后面插入span
$("div").before('节点');
//向div同级节点前面插入span
$('span').insertBefore('div')
//将span元素移到div元素外部的前面
$(function(){
        var div2 = $("
2
");
        var div3 = $("
3
");
        var div4 = $("
4
");
        var div5 = $("
5
");
        $("#div1").after(div2);  //向同级节点的后面插入节点
        $("#div1").before(div3); //向同级节点的前面插入节点
        div4.insertBefore($("#div1"));  //将div4节点插入到div1的前面
        div5.insertAfter($("#div1"));  //将div5插入到div1的后面

    })

包裹节点

• wrap(html) 向指定元素包裹一层html代码

• wrap(ele) 向指定元素包裹一层DOM元素节点

• unwrap() 移除一层指定元素包裹的内容,多个需移除很多次

• wrapAll(html) 用html将所有元素包裹在一起

• wrapAll(ele) 用DOM对象将所有元素包裹在一起

$("#div1").wrap("
");  //在div1外面包裹了一层div2
$("#div1").wrap("");  //div1的外面包裹了层div元素
$("p").wrapAll("");

这里特别注意的就是wrap()和wrapAll()的区别
前者是把每个元素当成一个独立体，分别包含一层外层
后者将所有元素作为一个整体作为独立体，只包含一层外层。这两种都是在外层包含

节点操作

• 复制节点 clone

$("body").append($("div").clone(true))
//复制一个节点添加到html中
这里特别注意的就是clone(true)参数可以为空,表示只复制元素和内容，不复制事件行为。而加上事件true参数的话，这个元素附带的事件处理行为也复制出来

• 删除节点

$("div").remove();  //直接删除div元素
remove()不带参数时候，就是删除前面指定的元素。而remove()要是带参数。删除的就是带参数的。删除的是自身。比如
$("div").remove("#div1");只删除id是div1的元素
$("p").remove("#div1");  //只删除id是div1的P元素
$("p").remove();  //删除全部P元素

• 保留事件的删除节点 detach

$("div").detach();   //保留事件行为的删除

• 清空节点 empty

$("div").empty();   //删掉节点里的所有内容

• 替换节点 replaceWith

$("div").replaceWith('节点');
//将div替换成span元素
var box = $("
3
");
$("p").replaceWith(box);
这里特别注意的就是节点替换完以后，包含的事件全部消失了。