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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
JavaScript实现拖拽效果
Mar 16 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
PHP整合PayPal支付
2015/06/11 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
python解析xml模块封装代码
2014/02/07 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
仓库主管的岗位职责
2013/12/04 职场文书
前台接待员岗位职责
2015/04/15 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
oracle索引总结
2021/09/25 Oracle
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers