节点操作

• 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这个节点(包括事件)到指定元素