用jquery用了一年了，不过还一直停留在初级阶段。当初觉得jquery比js简单，所以便一直用jquery来写一些简单的特效。虽然之前学过js,由于长时间不用的原因，现在早忘记的一干二净了。人就是这样，学过的东西，长时间不用就会慢慢忘记，直到被挡在门外......

今天来重温下jquery文档处理操作中的一些属性。通常我们常常会向页面中追加新内容，这个经常会用“append”，手册释义：向每个匹配的元素内部追加内容，公式：$(A).append(B);。下面来看一实例，要求：页面中有一个“p”标签，现在我想向“p”标签中追加一个“b”标签。jquery源码可以这样写：

$('p').append('<b></b>');

页面源码截图：　
现在“p”标签里面是空内容，如果“p”标签里面的内容不为空，那么“b”标签的位置是怎么样的呢？下面来看实例二，要求：页面中有一个“p”标签，“p”标签里面有2个“a”标签，现在要向“p”标签中追加一个“b”标签。此时还用上面的jquery源码，来看下页面源码截图:
　
此时我们可以看到，当“p”标签内容不为空时，“b”标签依然紧跟在闭合“p”之前。因此我们可以得出结论：B追加到A中且追加的位置在内容后，千万要把追加与被追加对象搞反了！

下面再来说下“appendTo”，看似是不是跟前面的那个“append”很相似？手册释义：把所有匹配的元素追加到另一个指定的元素元素集合中，公式：$(B).appendTo(A);。下面还以上面的实例来进行操作，用“appendTo”来实现上面的效果，jquery源码如下：

$('<b></b>').appendTo('p');

页面源码截图：　
怎么样，现在是不是跟刚才一样了。这个才是互换AB的位置才能和“append”的效果一样。

既然可以在“a”的后面闭合“p”之前追加内容，那么可不可以在“a”的前面追加内容呢？答应是可以的。下面来说下“prepend”，手册释义：向每个匹配的元素内部前置内容，公式：$(A).prepend(B);。还是用上面的实例，jquery源码如下：

$('p').prepend('<b></b>');

页面源码截图：　
现在“b”的位置就跑到了“a”的前面，与刚才“append”的追加位置相反。当然了，“prepend”也有“prependTo”的，也许您已经猜到了这个“prependTo”的用法了。没错，公式就是：$(B).prependTo(A);。jquery源码如下：

$('<b></b>').prependTo('p');

页面源码截图：　

下面来放一张“append”，“appendTo”，“prepend”，“prependTo”四者的对比图：
　

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2014-08-20/193.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。