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 相关文章推荐
JavaScript框架(iframe)操作总结
Apr 16 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 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
Protoss魔法科技
2020/03/14 星际争霸
php自定义函数之递归删除文件及目录
2010/08/08 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
python数据结构之列表和元组的详解
2017/09/23 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
python join方法使用详解
2019/07/30 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
python中time、datetime模块的使用
2020/12/14 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
4s店机修工岗位职责
2013/12/20 职场文书
美术教学感言
2014/02/22 职场文书
生活小常识广播稿
2014/09/16 职场文书
PHP命令行与定时任务
2021/04/01 PHP
Python基础之数据类型知识汇总
2021/05/18 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技