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 相关文章推荐
jquery 插件学习(一)
Aug 06 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
python解析中国天气网的天气数据
2014/03/21 Python
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python每天必学之bytes字节
2016/01/28 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
python3人脸识别的两种方法
2019/04/25 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
机关班子查摆问题及整改措施
2014/10/28 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫