jQuery對內容的獲取,新增,移動的.append(), .html(), .prepend(), .after(), .before()
阿新 • • 發佈:2019-01-31
在jQuery中我們使用.append(), .appendTo(), .html(), .text(), .prepend(), .prependTo(), .after(), .before(), .insertAfter(), .insertBefore() 是很方便的。
注意:是在引入jQuery庫的前提下使用。
一、.append();.appendTo() 插入不替換
.append()函式將特定內容插入到每個匹配元素裡面的最後面,作為它的最後一個子元素(last child),(如果要做為第一個子元素(first child)用.prepend)。
.appendTo()和.append()的功能相同。主要不同的是語法:插入內容和目標的位置不同。
解釋:.append()選擇表示式在函式的前面,引數是將要插入的內容。對於.appendTo()剛好相反,內容在方法前面,無論是一個選擇器表示式或建立作為標記上的標記,它都
將被插入到目標容器的結尾。
二、.html();.text() 插入替換(還可以獲取) 設定元素的內容情況下: 1、.html()會把選擇器下的已存在的元素全部替換為當前設定的元素(或文字),元素中的任何內容會完全被新的內容取代( 用新的內容替換這些元素前,jQuery從子元素刪除其他結構,如資料和事件處理程式。防止記憶體溢位)。 2、text()會把選擇器下的已存在的文字全部替換為當前設定的文字。 獲取的情況下: 1、.html()獲取集合中第一個匹配元素的HTML內容( 如果選擇器匹配多個元素); 2、.text()得到匹配元素集合中每個元素的文字內容結合,包括他們的後代,或設定匹配元素集合中每個元素的文字內容為指定的 文字內容;在XML 和 HTML 文件中都能使用。 3、.text()方法不能使用在 input 元素或scripts元素上。 或
三、.prepend(), .prependTo() 插入不替換 1、如果一個被選中的元素被插入到另外一個地方,這是移動而不是複製。 正好相反,將要被插入的內容寫在方法的前面,可以是選擇器表示式或動態建立的標記,待插入內容的容器作為引數。
四、.after(), .insertAfter() 1、在匹配元素集合中的每個元素後面插入引數所指定的內容,作為其兄弟節點。 2.
以上五大點需要注意,一個共同點:如果一個被選中的元素被插入到另外一個地方,這是移動而不是複製。 舉其中五個中的其中一個:
移動之前:
將被插入到目標容器的結尾。
二、.html();.text() 插入替換(還可以獲取) 設定元素的內容情況下: 1、.html()會把選擇器下的已存在的元素全部替換為當前設定的元素(或文字),元素中的任何內容會完全被新的內容取代( 用新的內容替換這些元素前,jQuery從子元素刪除其他結構,如資料和事件處理程式。防止記憶體溢位)。 2、text()會把選擇器下的已存在的文字全部替換為當前設定的文字。 獲取的情況下: 1、.html()獲取集合中第一個匹配元素的HTML內容( 如果選擇器匹配多個元素); 2、.text()得到匹配元素集合中每個元素的文字內容結合,包括他們的後代,或設定匹配元素集合中每個元素的文字內容為指定的 文字內容;在XML 和 HTML 文件中都能使用。 3、.text()方法不能使用在 input 元素或scripts元素上。
input
textarea
需要使用.val()方法獲取或設定文字值。得到scripts元素的值,使用.html()方法;三、.prepend(), .prependTo() 插入不替換 1、如果一個被選中的元素被插入到另外一個地方,這是移動而不是複製。
2、.prepend()
方法將指定元素插入到匹配元素裡面作為它的第一個子元素 (如果要作為最後一個子元素插入用.append() ).
3、.prepend()
和.prependTo() 實現同樣的功能,主要的不同是語法,插入的內容和目標的位置不同。 對於
.prepend()
而言,選擇器表示式寫在方法的前面,作為待插入內容的容器,將要被插入的內容作為方法的引數。而 .prependTo()
四、.after(), .insertAfter() 1、在匹配元素集合中的每個元素後面插入引數所指定的內容,作為其兄弟節點。 2.
.after()
和.insertAfter() 實現同樣的功能。主要的不同是語法——內容和目標的位置不同。 對於.after()
,要插入的內容來自方法的引數:$(target).after(contentToBeInserted)
(即,選擇器表示式在方法的前面,引數是將要插入的內容) 。 對於.insertAfter()
, 剛好相反,內容在方法前面並且插入到目標的前面, 而目標是傳遞給.insertAfter()
方法的引數:
$(contentToBeInserted).insertAfter(target)
。
五、.before(),.insertBefore()
1、 根據引數設定,在匹配元素的前面插入內容(外部插入)
2、 .before()
和.insertBefore() 實現同樣的功能。主要的不同是語法——內容和目標的位置不同。 對於.before()
,要插入的內容來自方法的引數:$(target).before(contentToBeInserted)
(愚人碼頭注:即,選擇器表示式在方法的前面,引數是將要插入的內容) 。 對於.insertBefore()
, 剛好相反,內容在方法前面並且插入到目標的前面,
而目標是傳遞給.insertBefore()
方法的引數: $(contentToBeInserted).insertBefore(target)
。
3、例子: 重要: 如果有多個目標元素,內容將被複制然後插入到每個目標裡面。(以上五大點共有的內容)
以上五大點需要注意,一個共同點:如果一個被選中的元素被插入到另外一個地方,這是移動而不是複製。 舉其中五個中的其中一個:
移動之前:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
移動方法:
$('.container').prepend($('h2'));
結果:
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>