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实现页面自适应
Jan 19 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
layui复选框的全选与取消实现方法
Sep 02 Javascript
vue el-table实现行内编辑功能
Dec 11 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 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
谈谈PHP的输入输出流
2007/02/14 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
php的大小写敏感问题整理
2011/12/29 PHP
PHP插入排序实现代码
2013/04/04 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
Bootstrap基础学习
2015/06/16 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
json数据格式常见操作示例
2019/06/13 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
基于Python闭包及其作用域详解
2017/08/28 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python实现大文本文件分割
2019/07/22 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Python如何输出警告信息
2020/07/30 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
怎样声明一个匿名的内部类
2016/06/01 面试题
电大毕业个人生自我鉴定
2014/03/26 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
新手必备Python开发环境搭建教程
2021/05/28 Python