jQuery教程(5)-DOM树操作之插入新元素

文章标签: jquery,jquery-dom
2014-12-28 20:30:27     12 人阅读    

插入新元素
jQuery提供了很多将元素插人到文档中的方法。每一种方法的名字都表明了新内容与已有内 容之间的关系。例如,我们想把back to top链接插人到每个段落后面,因此就可以使 用.insertAfter()方法,参见代码清单5-7。
代码清单5-7
//未完成的代码

$(document).ready(function() {
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
$('<a id="top"></a>');
});


在将链接实际地插人到页面(也插人到DOM)中之后,<div class="chapter">中的每 个段落后面,都应该出现back to top链接,如图5-4所示。


图5-4
我们注意到,新链接出现在单独的一行中,并没有出现在段落内部。这是因为insertAfter() 方法及其对应的.insertBefore()方法,都是在指定的元素外部插人新内容。
不过,现在的链接还不能用。因此,我们需要再插人id="top"的锚。要插人这个锚,可以 选用一种在其他元素中插人元素的方法,参见代码清单5-8。
代码清单5-8

$(document).ready(function() {
$('<a href=M#topM>back to top</a>').insertAfter('div.chapter p');
$('<a id="topM></a>').prependTo('body');
});


新增的代码在<body>的开头,也就是页面的顶部插人了锚元素。在通过.insertAfter()
方法插人链接和.prependTo()方法插人锚之后,这个页面就具备了完备的back to top链接。
如果再算上.appendTo()方法,那我们就已经知道了在其他元素前、后插人新内容的一套 方案。
.insertBefore()在现有元素外部、之前添加内容;
.prependTo()在现有元素内部、之前添加内容;
.appendTo()在现有元素内部、之后添加内容;
.insertAfter()在现有元素外部、之后添加内容。


原文地址:http://www.itmmd.com/201412/403.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

产品经理学习笔记(16)-产品运营常用的工具   上一篇
下一篇  jQuery教程(4)-DOM树操作之创建新元素

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!