jquery 建立元素和新增子元素

2021-07-25 01:40:58 字數 1066 閱讀 1831

一、建立新元素

1、使用$函式建立新元素

var $newelement=$('段落

');//建立元素,返回jquery物件

說明:其插入位置為某個元素的最後乙個子元素)

2)返回的jquery物件中只包含html片段最頂層(外層)的元素,對於後代元素我們可以像處理頁面中已有元素一樣,使用

children或find方法訪問

也就是說alert($newelement);的結果應為1

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

使用$函式建立元素,是返回的是jquery物件,我們可以使用jquery物件裡面的方法在建立的這個元素被插入到頁面之前進行

各種操作比如進行繫結事件處理函式!

2、轉殖已有的元素(通過轉殖已有元素生成新元素)

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

clone方法會複製jquery物件內包含後代元素在內的所有元素

引數:兩個引數都是可選

第乙個引數:

乙個布林值(true 或者 false)指示目標元素的事件處理函式以及關聯資料是否會被複製

第二個引數(預設情況下與第乙個引數一致):

乙個布林值,指示是否對轉殖的元素的所有子元素的事件處理程式以及關聯資料進行複製

二、新增子元素

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

引數型別說明:

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

2)jquery物件

①使用$函式建立的新元素(jquery物件)

②使用$函式獲取頁面中已經有的元素(jquery物件)

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

189段落

10div

③使用clone方法轉殖頁面中已經有的元素(jquery物件)

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

3)html元素物件、html元素物件陣列

jquery 動態建立元素

一般動態建立元素可以通過兩種方式 1 dom html var select document.createelement select select.options 0 new option 載入項1 value1 select.options 1 new option 載入項2 value2 s...

建立元素和刪除元素

動態建立新的dom元素,是js操作網頁物件模型的重要手段之一。執行效果 這裡寫描述 解析 建立新元素通常有2種方法 1 直接修改父元素的innerhtml元素 第一種方法用起來較為簡單,也易於理解,但需要修改整個父元素所包含的html內容,若父元素原先就包含了一些html內容,再進行dom掛接的話,...

js建立元素並新增的幾種方法

var tab document.queryselector container var p document.createelement p p標籤 tab.p 新增到最後面 var tab document.queryselector container var div 你好!字串型別 tab....