jQuery中prepend()方法使用详解


Posted in Javascript onAugust 11, 2015

prepend()方法将指定元素插入匹配元素按内部的开头,其作用和prependTo()方法基本相同,只在语法上有差别,虽然说在语法形式上看基本相同。

下面介绍下语法结构:

$(selector).prepend(content)

参数列表:

jQuery中prepend()方法使用详解

demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://3water.com/" />
<title>三水点靠木</title>
<style type="text/css">
div{
 height:200px;
 width:200px;
 border:1px solid green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
 $("div").prepend("被加添的内容");
 })
})
</script>
</head>
<body>
<div>前面要添加内容:</div>
<button>点击查看效果</button>
</body>
</html>

prepend()详解二:

prepend()函数用于向每个匹配元素内部的起始位置追加指定的内容。

指定的内容可以是:html字符串、DOM元素(或数组)、jQuery对象、函数(返回值)。

与该函数相对的是append()函数,用于向每个匹配元素内部的末尾位置追加指定的内容。

该函数属于jQuery对象(实例)。

语法

jQueryObject.prepend( content1 [, content2 [, contentN ]] )

参数

jQuery中prepend()方法使用详解

jQuery 1.4 新增支持:参数content1可以为函数。prepend()将根据匹配的所有元素遍历执行该函数,函数中的this将指向对应的DOM元素。

prepend()还会为函数传入两个参数:第一个参数就是当前元素在匹配元素中的索引,第二个参数就是该元素当前的内部html内容(innerHTML)。函数的返回值就是需要为该元素追加的内容(可以是html字符串、DOM元素、jQuery对象)。

注意:只有第一个参数可以为自定义函数,用于遍历执行。如果之后的参数也为函数,则调用其toString()方法,将其转为字符串,并视为html内容。
返回值

prepend()函数的返回值为jQuery类型,返回当前jQuery对象本身(以便于进行链式风格的编程)。

意:如果追加的内容是当前页面中的某些元素,那么这些元素将从原位置上消失。简而言之,这是一个移动操作,而不是复制操作。

示例&说明

prepend()函数用于将每个匹配元素内部的起始位置追加内容:

<p><!--插入到p元素内部的起始位置-->段落文本1<span></span></p>
<p><!--插入到p元素内部的起始位置-->段落文本2<span></span></p>

<script type="text/javascript">
$("p").prepend( '<!--插入到p元素内部的起始位置-->' ); 
</script>

请注意prepend()函数和prependTo()函数的区别:

var $A = $("s1");
var $B = $("s2");

// 将$B追加到$A中
$A.prepend( $B ); // 返回$A
// 将$A追加到$B中
$A.prependTo( $B ); // 返回表示追加内容的jQuery对象( 匹配所有$B内部开头追加的$A元素 )

以下面这段HTML代码为例:

<p id="n1">
 <span id="n2">CodePlayer</span> 
</p>
<p id="n3">
 <label class="move">Hello World</label>
</p>
<p id="n4">
 <i>测试内容</i>
</p>

以下jQuery示例代码用于演示prepend()函数的具体用法:

var $n1 = $("#n1");
//将一个strong标记追加到n1内部的起始位置
$n1.prepend( '<strong>追加内容</strong>' );


//将所有的label元素和i元素追加到n1内部的起始位置
//原来位置的label元素和i元素会消失(相当于是移动到n1内部的起始位置)
$n1.prepend( document.getElementsByTagName("label"), $("i") );

//为每个p元素内部的起始位置追加一个span元素,html内容根据索引而有所不同
var $p = $("p");
$p.prepend( function(index, html){
 return '<span>追加元素' + (index + 1) + '</span>'; 
} );

运行代码

prepend()会将内容追加到指定容器元素的开始标记之后,不会额外添加任何空白字符,上述代码执行后的完整html代码如下(格式未作任何调整):

<p id="n1"><span>追加元素1</span><label class="move">Hello World</label><i>测试内容</i><strong>追加内容</strong>
 <span id="n2">CodePlayer</span> 
</p>
<p id="n3"><span>追加元素2</span>
 
</p>
<p id="n4"><span>追加元素3</span>
 
</p>
Javascript 相关文章推荐
splice slice区别
Oct 09 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
详解JavaScript执行模型
Nov 16 Javascript
javascript实现数组中的内容随机输出
Aug 11 #Javascript
javascript弹出拖动窗口
Aug 11 #Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 #Javascript
javascript实现五星评价代码(源码下载)
Aug 11 #Javascript
jQuery的remove()方法使用详解
Aug 11 #Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 #Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 #Javascript
You might like
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
Jquery ui css framework
2010/06/28 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
35个Python编程小技巧
2014/04/01 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
恐龙的灭绝教学反思
2014/02/12 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
开幕式邀请函
2015/01/31 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
python中%格式表达式实例用法
2021/06/18 Python
Golang中channel的原理解读(推荐)
2021/10/16 Golang
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
Vue操作Storage本地化存储
2022/04/29 Vue.js