添加节点

· 内部插入

· append(content|fn)

· appendTo(content)

o 将元素添加到指定元素内部的最后

// 1.创建一个节点var $li = $("<li>新增的li</li>");// 2.添加节点// $("ul").append($li);

$li.appendTo("ul");

· prepend(content|fn)

· prependTo(content)

o 将元素添加到指定元素内部的最前面

// 1.创建一个节点var $li = $("<li>新增的li</li>");// 2.添加节点// $("ul").prepend($li);

$li.prependTo("ul");

· 外部插入

· after(content|fn)

· insertAfter(content)

o 将元素添加到指定元素外部的后面

// 1.创建一个节点var $li = $("<li>新增的li</li>");// 2.添加节点// $("ul").after($li);

$li.insertAfter("ul");

· before(content|fn)

· insertBefore(content)

o 将元素添加到指定元素外部的前面

// 1.创建一个节点var $li = $("<li>新增的li</li>");// 2.添加节点// $("ul").before($li);

$li.insertBefore("ul");

删除节点

· empty()

o 删除指定元素的内容和子元素, 指定元素自身不会被删除

$("div").empty();

· remove([expr])

o 删除指定元素

// 删除所有div

$("div").remove();// 删除div中id是box1的那个div

$("div").remove("#box1");

· detach([expr])

o 

// 删除所有div

$("div").detach();// 删除div中id是box1的那个div

$("div").detach("#box1");

· remove和detach区别

o remove删除元素后,元素上的事件会被移出

o detach删除元素后,元素上的事件会被保留

$("button").click(function () {

    // $("div").remove();

    // $("div").empty();

    // $("li").remove(".item");

    // 利用remove删除之后再重新添加,原有的事件无法响应

    // var $div = $("div").remove();

    // 利用detach删除之后再重新添加,原有事件可以响应

    var $div = $("div").detach();

    // console.log($div);

    // 将删除的返回值重新添加到body上

    $("body").append($div);

});

$("div").click(function () {

    alert("div被点击了");

});

替换节点

· replaceWith(content|fn)

o 将所有匹配的元素替换成指定的HTML或DOM元素

o replaceWith参数可以是一个DOM元素

o replaceWith参数也可以是一个代码片段

· replaceAll(selector)

o 用匹配的元素替换掉所有 selector匹配到的元素

// 编写jQuery相关代码

$("button").click(function () {

    // 创建一个新的节点

    var $item = $("<h6>我是标题6</h6>");

    // 利用新的节点替换旧的节点

    // $("h1").replaceWith($item);

    $item.replaceAll("h1");

});

复制节点

· clone([Even[,deepEven]])

· 复制一个节点

· 浅复制不会复制节点的事件

· 深复制会复制节点的事件

$(function () {

    // clone([Even[,deepEven]])

    $("button").eq(0).click(function () {

        // 1.浅复制一个元素

        var $li = $("li:first").clone(false);

        // 2.将复制的元素添加到ul中

        $("ul").append($li); // 点击li无法响应事件

    });

    $("button").eq(1).click(function () {

        // 1.深复制一个元素

        var $li = $("li:first").clone(true);

        // 2.将复制的元素添加到ul中

        $("ul").append($li); // 点击li可以响应事件

    });

    $("li").click(function () {

        alert($(this).html());

    });

});

包裹节点

· 都讲了这么多了, 骚年动动手, 查阅下文档, 尝试下自学这几个方法

· 编程不是死记硬背, 是学会找到解决问题的思路和自学新知识的方法

 本文由职坐标整理发布，学习更多的jQuery相关知识，请关注职坐标WEB前端jQuery频道！