比較jquery中的after(),append(),appendTo()方法

標籤：

html頁面：

<p id="myp1">我的興趣愛好是：</p>
<button id="b1">after函數</button>
<button id="b2">append函數</button>
<button id="b3">appendTo函數</button>

 

js頁面

$(document).ready(function () {
$("#b1").click(function () {
$("#myp1").after("<b>騎車</b>");
})
$("#b2").click(function () {
$("#myp1").append("<e>打球</e>");
})
$("#b3").click(function () {
$("<i>烘焙</i>").appendTo("#myp1");
})
})

 

最後結果：

 

 

說明，after()方法，插入的元素在選取元素的後面，並且是外面。append(),appendTo()的結果是一樣的，只是寫法不同，append()方法也是在選取元素的後面插入元素，不過是在選取元素的內部插入。

 在css中有：after虛擬元素來對選取的元素插入新的元素。

css頁面：

#myp1::after{
content:"騎車," "打球," "烘焙";
}

最後結果：

 

 

 

可以看出，css虛擬元素是在選取元素的內部插入。為了實現同樣的功能，CSS的虛擬元素的方法似乎比jquery中append()的方法更加簡單。

既然有向後插入元素，那也有向前插入元素的方法，在此不詳細的闡述了，原理其實都是一樣的。

 

比較jquery中的after(),append(),appendTo()方法