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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 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实现的mongoDB单例模式操作类
2018/01/20 PHP
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
javascript实现拖放效果
2015/12/16 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
浅谈js原生拖放
2016/11/21 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
Python动态加载模块的3种方法
2014/11/22 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
django-初始配置(纯手写)详解
2019/07/30 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python 从list中随机取值的方法
2020/11/16 Python
暇步士官网:Hush Puppies
2016/09/22 全球购物
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
使用索引有什么好处
2016/07/27 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
临床医学大学生求职信
2013/09/28 职场文书
安全生产检讨书
2014/01/21 职场文书
如何写自我鉴定
2014/03/19 职场文书
初中学生评语大全
2014/04/24 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
师德承诺书2015
2015/04/28 职场文书
python如何获取网络数据
2021/04/11 Python
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS