《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.8 技巧:使用prepend()和prependTo()添加内容

简介: prepend()和prependTo()函数的工作方式几乎同append()和appendTo()函数一样。“在后添加”(append)方式是把新内容放置在选中元素的后面,而以“在前添加”(prepend)方式是把新内容放置在前面。

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章,第3.8节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

3.8 技巧:使用prepend()和prependTo()添加内容

prepend()和prependTo()函数的工作方式几乎同append()和appendTo()函数一样。“在后添加”(append)方式是把新内容放置在选中元素的后面,而以“在前添加”(prepend)方式是把新内容放置在前面。代码清单3-8演示了prepend()和prependTo()函数的用法。

代码清单3-8 演示prepend()和prependTo()之间的区别

00 <!DOCTYPE html>
01 
02 <html lang="en">
03 <head>
04  <title>Difference between prepend() and prependTo()</title>
05 </head>
06 <body>
07 
08 <div id="prepend-placeholder">
09  <p>This content is for reference</p>
10 </div>
11 
12 <button id="prepend">append()</button><br>
13 
14 <div id="prepend-to-placeholder">
15  <p>This content is for reference</p>
16 </div>
17 
18 <button id="prepend-to">prependTo()</button><br>
19 
20 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
21 
22 <script>
23 // 请将下列代码移至一个外部的.js文件中
24 $(document).ready(function() {
25 
26  $('#prepend').click(function() {
27   $('#prepend-placeholder').prepend('<p>Test prepend</p>');
28  });
29 
30  $('#prepend-to').click(function() {
31   $('<p>Test prependTo()</p>').prependTo('#prepend-to-placeholder');
32  });
33  
34 });
35 </script>
36 </body>
37 </html>

第9行和第15行是帮助识别“在前添加”的文本内容,可以看到添加的内容位于所有已经存在的元素之前。同append()和appendTo()函数一样,prepend()和prependTo()函数的参数可以是DOM元素、HTML字符串、jQuery对象以及函数。

相关文章
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
20 1
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1193 0
|
5月前
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
7月前
|
Web App开发 前端开发 开发者
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
32 1
|
7月前
|
JavaScript
jQuery图片瀑布流demo效果示例(整理)jQuery瀑布流效果
jQuery图片瀑布流demo效果示例(整理)jQuery瀑布流效果
|
7月前
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
|
7月前
|
JavaScript
jquery多图片上传预览demo效果示例(整理)
jquery多图片上传预览demo效果示例(整理)
|
7月前
|
JavaScript
jquery上传头像demo效果示例(整理)
jquery上传头像demo效果示例(整理)
|
7月前
|
JavaScript
通俗易懂的jquery倒计时demo效果示例(整理)
通俗易懂的jquery倒计时demo效果示例(整理)
|
7月前
|
JavaScript
jquery模糊查询--搜索demo效果示例(整理)
jquery模糊查询--搜索demo效果示例(整理)