一、創建新元素

1、使用$函數創建新元素

var $newElement=$('

段落

');//創建元素,返回jQuery對象

說明：

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

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

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

children或find方法訪問 也就是說alert($newElement);的結果應為1

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

使用$函數創建元素，是返回的是jQuery對象，我們可以使用jQuery對象里面的方法在創建的這個元素被插入到頁面之前進行

各種操作比如進行綁定事件處理函數！

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

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

clone方法會復制jQuery對象內包含后代元素在內的所有元素

參數：

兩個參數都是可選

第一個參數：

一個布爾值(true 或者 false)指示目標元素的事件處理函數以及關聯數據是否會被復制

第二個參數(默認情況下與第一個參數一致)：

一個布爾值，指示是否對克隆的元素的所有子元素的事件處理程序以及關聯數據進行復制

二、添加子元素

1、append方法

在每個匹配元素內的 末尾處插入參數內容

參數類型說明：

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

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

2)jQuery對象

①使用$函數創建的新元素(jQuery對象)

②使用$函數獲取頁面中已經有的元素(jQuery對象)

此時會將已有的元素移動到目標元素內，就是被剪切了

1

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

8

9

段落

10

div

③使用clone方法克隆頁面中已經有的元素(jQuery對象)

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

3)html元素對象、html元素對象數組

====以上類型的參數可傳入多個，每個參數都會被插入到匹配元素！===

4)函數

有多少個匹配元素，這個函數就會執行多少次！

函數可以接受到兩個參數：第一個是當前元素的序號、第二個是當前元素內的html

函數內部this代表當前的html元素對象

return 的數據就是插入的內容(可以為html元素，也可以是jQuery對象)

2、prepend方法

將參數內容插入到每個匹配元素內部的 最前面

使用方法及參數與append相同

3、appendTo方法

將匹配的元素插入到目標元素內部的最后面(同append)

與append區別：

使用時目標元素與插入內容的位置 顛倒

創建新元素返回的jQuery對象與

選擇頁面中已有元素返回的jQuery對象都可調用此方法(選擇頁面中已有元素表示將已有的元素移動到目標元素內)！

參數(表示要插入元素的目標位置)：

Selector或者jQuery對象或者html元素對象/html元素對象數組

4、prependTo方法

將匹配的元素插入到目標元素內部的最前面(同prepend)

與prepend區別：

同上！

參數(表示要插入元素的目標位置)：

同上！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。