一.插入操作

　　1.　　父元素.append(子元素)

　　追加某元素,在父元素中新增新的子元素, 子元素可以為: stirng / element (js物件) / jquery 元素

var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$("ul").append("<li>haha</li>");
$("ul").append("oli");
$("ul").append($("#app"));

 　　如果追加的是jquery物件那麼這些元素將從原位置上消失, 簡言之,就是一個移動操作

　　2.　　子元素.appendTo(父元素)

　　追加到某元素 子元素新增到父元素　

  $('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('active')

　　要新增的元素同樣既可以是stirng 、element(js物件) 、 jquery元素

　　3.　　父元素.prepend(子元素);

　　前置新增, 新增到父元素的第一個位置

　　$('ul').prepend('<li>我是第一個</li>')

　　4.　　子元素.prependTo(父元素)

　　前置新增, 新增到父元素的第一個位置

　　$('<a href="#">路飛學誠</a>').prependTo('ul')

　　5.　　兄弟元素.after(要插入的兄弟元素)

　　　　　要插入的兄弟元素.inserAfter(兄弟元素);

　　在匹配的元素之後插入內容

　　$('ul').after('<h4>我是一個h3標題</h4>')
　　$('<h5>我是一個h2標題</h5>').insertAfter('ul')

　　6.　　兄弟元素.before(要插入的兄弟元素)

　　　　　要插入的兄弟元素.innserBefore(兄弟元素)

二. 克隆操作

　　$(選擇器).clone()

　　克隆匹配的DOM元素

$('button').click(function() {

  // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其所有的事件處理並且選中這些克隆的副本(簡言之，副本具有與真身一樣的事件處理能力)
  $(this).clone(true).insertAfter(this);
})

 三.修改操作

　　1.　　$(selector).replaceWith(content)

　　將所有匹配的元素替換成指定的string, js物件, jquery物件

//將所有的h5標題替換為a標籤
$('h5').replaceWith('<a href="#">hello world</a>')
//將所有h5標題標籤替換成id為app的dom元素
$('h5').replaceWith($('#app'));

 　　2.　　$("<p>哈哈哈</p>")replaceAll("h2")

　　替換所有, 將所有的h2標籤替換成p標籤.

　　$('<br/><hr/><button>按鈕</button>').replaceAll('h4')

四,刪除操作

　　1.　　$(select).remove()

　　刪除節點後, 事件也會刪除(刪除 了整個標籤)

　　$('ul').remove();

　　2.　　$(select).datach()

　　刪除節點後,事件會保留

 var $btn = $('button').detach()
 //此時按鈕能追加到ul中
 $('ul').append($btn)

 　　3.　　$(select).empty()

　　清空選中元素中的所有後代節點

　　//清空掉ul中的子元素，保留ul
　　$('ul').empty()

　　4.　　$(select).html("")

　　　　　$(select).text("")

　　用空的內容替換