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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
js实现导航吸顶效果
Feb 24 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
用Python遍历C盘dll文件的方法
2015/05/06 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python实现登陆文件验证方法
2018/10/06 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python实现DDos攻击实例详解
2019/02/02 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
python实现图片插入文字
2019/11/26 Python
Python实现随机爬山算法
2021/01/29 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
捷科时代的软件测试笔试题
2015/11/09 面试题
一位农村小子的自荐信
2014/04/07 职场文书
《观舞记》教学反思
2014/04/16 职场文书
银行职员自我鉴定
2014/04/20 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
Mysql Show Profile
2021/04/05 MySQL
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers