内部插入=》子节点
append后面
perpend前面
$(".append").click(function(){
//所有子元素得后面
// $("ul").append("<li>列表 append</li>");结果一样得
$("<li>列表 append</li>").appendTo($("ul"));
})
$(".perpend").click(function(){
//所有子元素得前面
$("ul").append("<li>列表 perpend</li>");
})
外部插入=>兄弟节点
before前面
after后面
$(".before").click(function(){
//所有子元素得前面
$("ul").before("<li>列表 before</li>");
})
$(".after").click(function(){
//所有子元素得后面
$("ul").after("<li>列表 after</li>");
})
包裹 =>父节点wrap
$(".wrap").click(function(){
//所有子元素得后面
$("ul").wrap("<div style='color:red'></div>");
})
//修改replaceWith
$(".replaceWith").click(function(){
$("li:first").replaceWith("<li>列表 new</li>");
})
//清空把里面得子元素干掉了empty
$(".empty").click(function(){
$("li:first").empty();
})
//删除remove
$(".remove").click(function(){
$("li:first").remove();
})
//克隆clone
$(".clone").click(function(){
$("li:first").clone().appendTo($("ul"));
})
筛选
$("li:first");
$("li".first);
$("li:eq(2)");
$("li").eq(2);
查找find(e|o|e) siblings([expr]) closest(e|o|e)
效果：
<body>
<button class="append">append</button>
<button class="perpend">perpend</button>
<br>
<button class="before">before</button>
<button class="after">after</button>
<br>
<button class="wrap">wrap</button>
<br>
<button class="replaceWith">replaceWith</button>
<br>
<button class="empty">empty</button>
<button class="remove">remove</button>
<br>
<button class="clone">clone</button>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
</body>
