04 Dom操作
$(function(){
//内部插入 =》 子节点
$(".append").click(function(){
//所有子元素的后面
// $("ul").append("<li>列表 append</li>");
$("<li>列表 append</li>").appendTo($("ul"));
})
$(".prepend").click(function(){
// 所有子元素的前面
$("ul").prepend("<li>列表 prepend</li>");
})
//外部插入 =》 兄弟节点
$("before").click(function(){
//所有子元素上面
$("ul").before("<li>列表 before</li>");
})
$("after").click(function(){
//所有子元素下面
$("ul").after("<li>列表 after</li>")
})
//包裹 =》 父节点
$(".wrap").click(function(){
$("ul").wrap("<div style='color:red'></div>");
})
// 修改
$(".replaceWith").click(function(){
$("li:first").replaceWith("<li>列表 new</li>")
})
//删除
$(".empty").click(function(){
//清空内容
$("li:first").empty();
})
$(".remove").click(function(){
// 删除元素
$("li:first").remove();
})
$(".clone").click(function(){
$("li:first").clone().appendTo($("ul"))
})
// $("li").click(function(){
// console.log($(this).text())
// })
// $("ul").on("click","li",function(){
// console.log($(this).text())
// })
$("ul").on("click dbclick","li",function(){
console.log($(this).text())
})
