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 相关文章推荐
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
Node.js返回JSONP详解
May 18 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 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
推荐几个开源的微信开发项目
2014/12/28 PHP
php中动态变量用法实例
2015/06/10 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
python创建和使用字典实例详解
2013/11/01 Python
python绘制圆柱体的方法
2018/07/02 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
python获取交互式ssh shell的方法
2019/02/14 Python
python简单实现AES加密和解密
2019/03/28 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
性能服装:HYLETE
2018/08/14 全球购物
Linux文件系统类型
2012/02/15 面试题
Python使用openpyxl复制整张sheet
2021/03/24 Python
商务英语毕业生自荐信范文
2013/11/08 职场文书
五一口号
2014/06/19 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android