八、JQuery中的DOM操作

1、内部最后面添加

  • 　　　append：在div1的内部，最后追加一个图片（在A中添加b）

    $("#div1").append("<img src='../01-HTML基本标签/images/1.gif'/>");

  • 　　　appendTo：把一个图片追加到div1的内部最后（将b添加到A中）

    　　　$("<img src='../01-HTML基本标签/images/2.gif'/>").appendTo("#div1");

　2、内部最前方插入

  • 　　　prepend：

    　　　 $("#div1").prepend("<img src='../01-HTML基本标签/images/1.gif'/>");

  • 　　　prependTo：

    　　　 $("<img src='../01-HTML基本标签/images/2.gif'/>").prependTo("#div1");

3、在div1的外部，后面插入节点

  • 　　　after： 
　　　 $("#div1").after("<p>这是一个p</p>");
  • 　　　insertAfter： 
　　　 $("<p>11111</p>").insertAfter("#div1");

4、在div1的外部，前面插入节点

  • 　　　before：

    　　　 $("#div1").before("<p>这是一个p</p>");

  • 　　　insertBefore：

    　　　 $("<p>11111</p>").insertBefore("#div1");

5、为每一个选中的节点，都套一层父节点。

  • 　　　wrap：

    　　　 $("div").wrap("<section></section>");

  • 　　　wrapAll：

    　　　 $("div").wrapAll("<section></section>");

6、将选中的所有节点，包裹在同一个父节点中

  • 　　　wrapAll： 
　　　 $("p").wrapAll("<section></section>"); 　　// ×  

　　　 $("div~p").wrapAll("<section></section>");  　

7、删除选中节点的父节点

  • 　　　unwrap：
    　　　 $("#div1 p").unwrap();

8、将选中节点中的所有子元素，包裹在一个新的父节点中；

新的父节点依然是当前元素的唯一子节点

  • 　　　wrapInner：
    　　　 $("#div1").wrapInner("<div></div>");

9、将所有选中的节点，重新替换为新的节点

  • 　　　replaceWith：

    　　　 $("div p").replaceWith("<span>1</span>");

  • 　　　replaceAll：

    　　　 $("<span>1</span>").replaceAll("div p");

  • 　　　只替换标签：　　　

    　　 　$("div p").wrapInner("<span></span>");
　　 $("div p>span").unwrap();

    　

10、

empty：清空当前节点内容，但会保留当前节点标签

　　　 $("#div1").empty();

remove：删除当前节点，以及当前节点的所有子节点，使用remove删除的节点，如果恢复以后，将不再保留节点所绑定的事件；

　　　 $("#div1").remove();

detach：删除当前节点，以及当前节点的所有子节点，使用detach删除的节点，在节点恢复以后，可以恢复节点之前所绑定的事件。

　　　 $("#div1").detach();

11、clone：克隆

　　　 $("#div1").clone(true).empty().insertBefore("button:eq(0)");