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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
Vue路由守卫之路由独享守卫
Sep 25 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
第七节 类的静态成员 [7]
2006/10/09 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
javascript 写类方式之八
2009/07/05 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
js实现登录验证码
2016/12/22 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
使用python绘制人人网好友关系图示例
2014/04/01 Python
python基础教程之面向对象的一些概念
2014/08/29 Python
在Django中创建动态视图的教程
2015/07/15 Python
python黑魔法之编码转换
2016/01/25 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python中django学习心得
2017/12/06 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
比利时香水网上商店:NOTINO
2018/03/28 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
毕业生求职简历的自我评价
2013/10/07 职场文书
教师个人剖析材料
2014/02/05 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
初中班级口号
2014/06/09 职场文书
电子商务专业求职信
2014/07/10 职场文书
政风行风建设整改方案
2014/10/27 职场文书
教师个人发展总结
2015/02/11 职场文书
PyMongo 查询数据的实现
2021/06/28 Python