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"));//複製列表中第一個
})

結果如下：