節點操作

• 1.動態創建元素

// $()函數的另外一個作用：動態創建元素  
var $li = $(“<li>我是一個li元素</li>”); 

• 2.html創建元素
  作用：設置或返回所選元素的html內容（包括 HTML 標記）
  設置內容的時候，如果是html標記，會動態創建元素，此時作用跟JS里面的innerHTML屬性相同

// 動態創建元素  
$("div").html(‘<span>我是內容</span>’);  
// 獲取html內容  
$("div").html(); 

• 3.添加元素
• append()方法
  作用：在被選元素內部的最后一個子元素（或內容）后面插入內容（頁面中存在或者創建出來的元素都可以）

//在$('.red')的最后一個子元素后面添加$li
$('.red').append($li);
//參數可以為htmlString 
$('.red').append("<li></li>");

• appendTo()方法
  作用：同append()，區別是：把$li追加到$('.red')中去

$li.appendTo($('.red'))

• prepend()方法
  作用：在被選元素內部的第一個子元素前面追加內容或節點

//在$('.red')的第一個子元素前面添加$li
$('.red').prepend($li);

• prependTo()方法
  作用：同prepend()，區別是：把$li追加到$('.red')中去

$li.prependTo($('.red'));

• after()方法/insertAfter()方法
  作用：在被選元素之后，作為兄弟元素插入內容或節點

$('.red').after($li);
$li.insertAfter($('.red'))

• before()方法/insertBefore()方法
  作用：在被選元素之前，作為兄弟元素插入內容或節點

$('.red').before($li);
$li.insertBefore($('.red'))

• 4.刪除清空節點

//把自己，包括所有內部元素，從文檔中刪除掉 
$('.red').remove();
//清空指定元素的所有子元素 
$('.red').empty();
$('.red').html('')

• 注意：如果有事件,使用html("")方法清空節點并不會清除事件,而empty方法則會清除元素上的所有事件,因此推薦使用empty方法清空節點
• 5.復制節點
• clone()方法
  作用：淺復制, 僅僅復制這個節點, 而不復制事件

var $pTag = $('p');
$pTag.clone();      //復制$pTag這個節點到指定元素

• clone(true)方法
  作用：深復制 復制這個節點, 會復制事件

var $pTag = $('p');
$pTag.clone(true);        //復制$pTag這個節點(包括事件)到指定元素