Dom事件:

DOM 的增删改查
 添加、移除、替换、插入
1) appendChild()
2) removeChild()
3) replaceChild()
4) insertBefore() // 在已有的子节点前插入一个新的子节点

内部插入：

1.append

 

            //内部插入  =>  子节点
$(".append").click(function(){
    // 所有子元素的后面
    $("ul").append("<li>列表 append</li>");
  // $("<li>列表 append</li>").appendTo($("ul"));
})

 

输出结果位于所有子元素后面，如下：

 2.prepend

$(".prepend").click(function(){
    //所有子元素的前面
    $("ul").prepend("<li>列表 prepend</li>");
})

输出结果：

 外部插入:

1.before

//外部插入
$(".before").click(function(){
    //所有子元素的上面
    $("ul").before("<li>列表 before</li>");
})

输出结果:

 2.after

$(".after").click(function(){
    //所有子元素的下面
    $("ul").after("<li>列表 after</li>");
})

输出结果:

wrap:

//包裹 => 父节点
$(".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"));//复制列表中第一个
})

结果如下：