jQuery 節(jié)點(diǎn)操作

1、動(dòng)態(tài)創(chuàng)建元素

// $()函數(shù)的另外一個(gè)作用：動(dòng)態(tài)創(chuàng)建元素
var $spanNode = $("<span>我是一個(gè)span元素</span>");

2、添加元素

/在元素的最后一個(gè)子元素后面追加元素/：
`append()`
/作用/：在被選元素內(nèi)部的最后一個(gè)子元素（或內(nèi)容）后面插入內(nèi)容（頁(yè)面中存在或者創(chuàng)建出來(lái)的元素都可以）

// 在$(selector)中追加$node
$(selector).append($node);
// 在$(selector)中追加div元素，參數(shù)為htmlString
$(selector).append('<div></div>');

/注意/：
// 1.如果是頁(yè)面中存在的元素，那么調(diào)用append()后，會(huì)把這個(gè)元素從原先的位置移除，然后再插入到新的位置。
// 2.如果是給多個(gè)目標(biāo)追加一個(gè)元素，那么append()方法的內(nèi)部會(huì)復(fù)制多份這個(gè)元素，然后追加到多個(gè)目標(biāo)里面去。（最好不要這么做）
常用參數(shù)：htmlString 或者 jQuery對(duì)象

/不常用操作/：（用法跟append()方法基本一致）
$(selector).appendTo(node);  作用：同append()，區(qū)別是：把$(selector)追加到node中去
$(selector).prepend(node);   作用：在元素的第一個(gè)子元素前面追加內(nèi)容或節(jié)點(diǎn)
$(selector).after(node);     作用：在被選元素之后，作為兄弟元素插入內(nèi)容或節(jié)點(diǎn)
$(selector).before(node);    作用：在被選元素之前，作為兄弟元素插入內(nèi)容或節(jié)點(diǎn)

3、html創(chuàng)建元素

/作用/：設(shè)置或返回所選元素的html內(nèi)容（包括 HTML 標(biāo)記）
設(shè)置內(nèi)容的時(shí)候，如果是html標(biāo)記，會(huì)動(dòng)態(tài)創(chuàng)建元素，此時(shí)作用跟js里面的 innerHTML屬性相同

// 動(dòng)態(tài)創(chuàng)建元素
$(selector).html("<span>我是文本</span>");
// 獲取html內(nèi)容
$(selector).html();

總結(jié)：推薦使用html("<span></span>")方法來(lái)創(chuàng)建元素或者h(yuǎn)tml("")清空元素

4、清空元素empty()、html()、remove()

// 清空指定元素的所有子元素（光桿司令）
// 沒(méi)有參數(shù)
$(selector).empty();
$(selector).html("");

// "自殺" 把自己（包括所有內(nèi)部元素）從文檔中刪除掉
$(selector).remove();

5、復(fù)制元素

$(selector).clone();
作用：復(fù)制匹配的元素
// 復(fù)制$(selector)所匹配到的元素
// 返回值為復(fù)制的新元素