《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对象以及函数。

相关文章
|
3月前
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
5月前
|
Web App开发 前端开发 开发者
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
26 1
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1098 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
112 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
315 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
178 0
|
前端开发 JavaScript 程序员
【前端】使用jQuery封装一套UI组件 - 单选框
目前前端技术发展非常快,各大厂都开源和分享了自家的前端框架,非常多成熟的UI组件供大家选择,很实用也很方便,给开发上节省了不少时间成本,当然少不了学习成本,不过也不会占用太多时间,只要有前端基础的话,原理基本都是通用的,只是写法不一样。 因此,除了学习现有的优秀前端之外,最好能自己根据原理封装一套自己的UI组件,目的是为了更好的理解前端知识点以及锻炼编程逻辑
116 0
|
JavaScript PHP
phpQuery,php爬虫类库,像jQuery一样轻松采集内容
phpQuery,php爬虫类库,像jQuery一样轻松采集内容
165 0
|
4月前
|
移动开发 开发框架 JavaScript
SAP UI5 应用里 /sap/ui/thirdparty/sinon.js 的作用
SAP UI5 应用里 /sap/ui/thirdparty/sinon.js 的作用
45 0
|
4月前
|
中间件 开发工具
使用 SAP Fiori Tools 提供的中间件导入本地下载的 SAP UI5 库文件来启动 SAP UI5 应用试读版
使用 SAP Fiori Tools 提供的中间件导入本地下载的 SAP UI5 库文件来启动 SAP UI5 应用试读版
77 0

相关产品

  • 云迁移中心