比较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()方法

标签：

原文地址：http://www.cnblogs.com/alisayuan/p/4736732.html