一、創(chuàng)建新元素

1、使用$函數(shù)創(chuàng)建新元素

var $newElement=$('

段落

');//創(chuàng)建元素,返回jQuery對(duì)象

說(shuō)明：

1)創(chuàng)建的新元素不會(huì)自動(dòng)的把新元素插入到頁(yè)面中，我們還需要明確的指定其插入到頁(yè)面中的位置(比如使用append方法，指定

其插入位置為某個(gè)元素的最后一個(gè)子元素)

2)返回的jQuery對(duì)象中只包含html片段最頂層(外層)的元素，對(duì)于后代元素我們可以像處理頁(yè)面中已有元素一樣，使用

children或find方法訪問(wèn) 也就是說(shuō)alert($newElement);的結(jié)果應(yīng)為1

3)既然可以直接apend等方法插入html元素為何還要有這個(gè)創(chuàng)建新元素的功能？

使用$函數(shù)創(chuàng)建元素，是返回的是jQuery對(duì)象，我們可以使用jQuery對(duì)象里面的方法在創(chuàng)建的這個(gè)元素被插入到頁(yè)面之前進(jìn)行

各種操作比如進(jìn)行綁定事件處理函數(shù)！

2、克隆已有的元素(通過(guò)克隆已有元素生成新元素)

使用clone方法以已有的元素(或者新創(chuàng)建的元素)為模子生成新元素

clone方法會(huì)復(fù)制jQuery對(duì)象內(nèi)包含后代元素在內(nèi)的所有元素

參數(shù)：

兩個(gè)參數(shù)都是可選

第一個(gè)參數(shù)：

一個(gè)布爾值(true 或者 false)指示目標(biāo)元素的事件處理函數(shù)以及關(guān)聯(lián)數(shù)據(jù)是否會(huì)被復(fù)制

第二個(gè)參數(shù)(默認(rèn)情況下與第一個(gè)參數(shù)一致)：

一個(gè)布爾值，指示是否對(duì)克隆的元素的所有子元素的事件處理程序以及關(guān)聯(lián)數(shù)據(jù)進(jìn)行復(fù)制

二、添加子元素

1、append方法

在每個(gè)匹配元素內(nèi)的 末尾處插入?yún)?shù)內(nèi)容

參數(shù)類型說(shuō)明：

1)普通字符串(可包含各種html標(biāo)簽)

$('body').append('html字符串');

2)jQuery對(duì)象

①使用$函數(shù)創(chuàng)建的新元素(jQuery對(duì)象)

②使用$函數(shù)獲取頁(yè)面中已經(jīng)有的元素(jQuery對(duì)象)

此時(shí)會(huì)將已有的元素移動(dòng)到目標(biāo)元素內(nèi)，就是被剪切了

1

2 $(function(){3 $getParagraph=$("p");//運(yùn)行后p段落會(huì)變成div的子元素4 $("#oo").append($getParagraph);5 }6 );7

8

9

段落

10

div

③使用clone方法克隆頁(yè)面中已經(jīng)有的元素(jQuery對(duì)象)

$getParagraph=$("p").clone();//這樣就避免了p段落會(huì)變成div的子元素

3)html元素對(duì)象、html元素對(duì)象數(shù)組

====以上類型的參數(shù)可傳入多個(gè)，每個(gè)參數(shù)都會(huì)被插入到匹配元素！===

4)函數(shù)

有多少個(gè)匹配元素，這個(gè)函數(shù)就會(huì)執(zhí)行多少次！

函數(shù)可以接受到兩個(gè)參數(shù)：第一個(gè)是當(dāng)前元素的序號(hào)、第二個(gè)是當(dāng)前元素內(nèi)的html

函數(shù)內(nèi)部this代表當(dāng)前的html元素對(duì)象

return 的數(shù)據(jù)就是插入的內(nèi)容(可以為html元素，也可以是jQuery對(duì)象)

2、prepend方法

將參數(shù)內(nèi)容插入到每個(gè)匹配元素內(nèi)部的 最前面

使用方法及參數(shù)與append相同

3、appendTo方法

將匹配的元素插入到目標(biāo)元素內(nèi)部的最后面(同append)

與append區(qū)別：

使用時(shí)目標(biāo)元素與插入內(nèi)容的位置 顛倒

創(chuàng)建新元素返回的jQuery對(duì)象與

選擇頁(yè)面中已有元素返回的jQuery對(duì)象都可調(diào)用此方法(選擇頁(yè)面中已有元素表示將已有的元素移動(dòng)到目標(biāo)元素內(nèi))！

參數(shù)(表示要插入元素的目標(biāo)位置)：

Selector或者jQuery對(duì)象或者h(yuǎn)tml元素對(duì)象/html元素對(duì)象數(shù)組

4、prependTo方法

將匹配的元素插入到目標(biāo)元素內(nèi)部的最前面(同prepend)

與prepend區(qū)別：

同上！

參數(shù)(表示要插入元素的目標(biāo)位置)：

同上！

總結(jié)

以上是生活随笔為你收集整理的jquery生成一个li_jquery-创建元素和添加子元素的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。