`jQuery` 节点操作

jQuery 节点操作

• 内部插入

  • append(content|fn)

    // 会将元素添加到指定元素内部的最后
    var $li = $("<li>新增的li</li>");
    $("ul").append($li);
    

  • appendTo(content)

    // 会将元素添加到指定元素内部的最后
    var $li = $("<li>新增的li</li>");
    $li.appendTo("ul");
    

  • prepend(content|fn)

    // 会将元素添加到指定元素内部的最前
    var $li = $("<li>新增的li</li>");
    $("ul").prepend($li);
    

  • prependTo(content)

    // 会将元素添加到指定元素内部的最前
    var $li = $("<li>新增的li</li>");
    $li.prependTo("ul")
    

• 外部插入

  • after(content|fn)

    // 会将元素添加到指定元素外部的后面
    var $li = $("<li>新增的li</li>");
    $("ul").after($li);
    

  • before(content|fn)

    // 会将元素添加到指定元素外部的前面
    var $li = $("<li>新增的li</li>");
    $("ul").before($li);
    

  • insertAfter(content)

    // 会将元素添加到指定元素外部的后面
    var $li = $("<li>新增的li</li>");
    $li.insertAfter("ul");
    

  • insertBefore(content)

    // 会将元素添加到指定元素外部的前面
    var $li = $("<li>新增的li</li>");
    $li.insertBefore("ul");
    

jQuery 删除节点的相关方法

1. remove([expr])

   $("div").remove(); // 删除指定元素
   

2. empty()

   $("div").empty(); // 删除指定元素的内容跟子元素  指定元素本身不会被删除
   

3. detach()

   $("div").detach(); // 删除指定元素	跟remove 一模一样 只是名字不一样