jQuery prepend（）和prependTo（）示例

最新推荐文章于 2022-06-17 14:39:51 发布
最新推荐文章于 2022-06-17 14:39:51 发布
阅读量267 收藏
点赞数
文章标签： javascript ViewUI

jQuery prepend（）和prependTo（）方法都执行相同的任务，在匹配元素的内容之前添加文本或html内容。 主要区别在于语法。

例如， 

<div class="box">I'm a big box</div>
<div class="box">I'm a big box 2</div>

1. $（'selector'）。prepend（'new text'）; 

$('.box').prepend("<div class='newbox'>I'm new box by prepend</div>");

2. $（'new text'）。prependTo（'selector'）; 

$("<div class='newbox'>I'm new box by prependTo</div>").prependTo('.box');

结果

以上两种方法都执行相同的任务，但是使用不同的语法， prepend（）或prependTo（）之后的新内容将变为
这确实是多功能工具。 对于要在其上使用滑块的任何网站，这都是这样做的方法。 如果您查看任何大型网站，例如www.o2.co.uk/之类的网站，或电影网站，您很可能会看到一个正在使用的网站。 这是一种使图像旋转看起来很灵巧并吸引观看者眼球的好方法。 它为您的网站增加了不同的维度，使其真正脱颖而出。 

<div class="box">
   <div class='newbox'>I'm new box by prepend</div>
   I'm a big box
</div>

<div class="box">
   <div class='newbox'>I'm new box by prepend</div>
   I'm a big box 2
</div>

自己尝试 

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	.box{
		padding:8px;
		border:1px solid blue;
		margin-bottom:8px;
		width:300px;
		height:100px;
	}
	.newbox{
		padding:8px;
		border:1px solid red;
		margin-bottom:8px;
		width:200px;
		height:50px;
	}
</style>

</head>
<body>
  <h1>jQuery prepend() and prependTo example</h1>

  <div class="box">I'm a big box</div>
  
  <div class="box">I'm a big box 2</div>
  
  <p>
  <button id="prepend">prepend()</button>
  <button id="prependTo">prependTo()</button>
  <button id="reset">reset</button>
  </p>
  
<script type="text/javascript">
	
    $("#prepend").click(function () {
		
	  $('.box').prepend("<div class='newbox'>I'm new box by prepend</div>");
	  
    });
	
    $("#prependTo").click(function () {
		
	  $("<div class='newbox'>I'm new box by prependTo</div>").prependTo('.box');
	  
    });
	
    $("#reset").click(function () {
	  location.reload();
    });
	
</script>
</body>
</html>
试试演示
标签：

翻译自: https://mkyong.com/jquery/jquery-prepend-and-prependto-example/

cyan20115
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery中的apend()与apendTo()用法
qq_43920456的博客
07-26 854
先上案例 <style type="text/css"> div{ width: 50px; background-color: pink; } </style> <body> <div class="test">hello</div> </body> 我首先创建这样一个div对象。 再使用了append() 或者 appendTo() 方法后 <script> window.onlo
jQuery中prepend（）方法使用详解
10-23
值得注意的是，`prepend()`与`prependTo()`方法的主要区别在于它们的返回值和操作顺序。`prepend()`返回的是修改后的jQuery对象，便于链式操作；而`prependTo()`返回的是被插入内容的jQuery对象，适用于那些需要获取...
prepend()和prependTo(), append()和appendTo()的区别
rouduo_zjy的博客
02-19 1798
prepend()和prependTo()的区别： prepend() $(目标元素).prepend(内容) 在…首段的内部插入内容 html：<p>这是目标元素</p> jquery：$("p").prepend("这是prepend插入的内容，") 那么执行后的结果就是： html： <p>这是prepend插入的内容，这是目标元素</p&g...
jQuery里.prepend()和.prependTo的方法使用。
m0_51491785的博客
11-20 1878
jQuery里.prepend()和.prependTo的方法使用。
js中几种追加元素的方法
MImi_0612的博客
06-17 7762
a：要追加的位置 b：要追加的内容 1、append：a.append(b) 将b追加到a的内部的末尾，b是a的子元素 2、appendTo：b.appendTo(a) 将b追加到a的内部的末尾，b是a的子元素 3、prepend：a.prepend(b),将b追加到a的内部的最前面，b是a的子元素 4、prependTo：b.prependTo(a),将b追加到a的内部的最前面，b是a的子元素 5、after：a.after(b),将元素(b)追加到(a)后面，二者同级 6、before：a
css中.prepend,prepend()和prependTo()方法在jquery中有什么区别
weixin_42524013的博客
08-04 872
prepend()和prependTo()方法在jquery中有什么区别发布时间：2021-04-25 16:43:27来源：亿速云阅读：51作者：Leahprepend()和prependTo()方法在jquery中有什么区别？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。jquery是什么jquery是一个简洁而快速...
jQuery prependTo( ) 方法
m0_57835615的博客
06-11 390
appendTo( ) 方法可用于在被选元素的开头插入 HTML 元素。 语法格式： $(content).prependTo(selector)
jQuery操作元素追加内容示例
11-29
通过本文的学习，你应该能够理解并运用jQuery的`.append()`、`.prepend()`、`.appendTo()`和`.prependTo()`等方法，以及它们的兄弟方法`.after()`和`.before()`来实现元素内容的追加和外部插入。实践出真知，动手...
JQuery进阶.docx
06-11
- `prependTo(content)`：与`prepend`相反，将所有匹配的元素前置到指定的元素集合中。 - `after(content|fn)`：在每个匹配的元素之后插入内容。例如，`$("p").after("<b>Hello</b>");`在每个段落后插入加粗的...
jquery DOM操作 基于命令改变页面
10-29
`.prepend()` 和 `.prependTo()` 则在开头插入。 2. **相邻插入**：`.after()` 和 `.insertAfter()` 在每个匹配元素后面插入内容；`.before()` 和 `.insertBefore()` 在前面插入。 3. **包裹元素**：`.wrap()` 方法...
jquery中prepend和prependTo
eric4421的专栏
06-29 1507
先看jquery手册的解释 PrependTo：将domB添加到另外一个domA或jquery对象中 把所有匹配的元素前置到另一个、指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。例： Html： I would like to say: Jquery：$("p").prependTo("#foo"); 结果：I would like to say: Prepend：在DOMA中添加DOMB并将其前置在DOMA中。 向每
java中prepend的用法_jQuery中prependTo()方法用法实例
weixin_42412396的博客
02-26 224
本文实例讲述了jQuery中prependTo()方法用法。分享给大家供大家参考。具体分析如下：此方法把匹配的元素插入指定元素之前。prependTo()方法的作用和prepend()方法是相同的，但是在语法上是有差别的，虽然在形式上看起来是一样的。语法结构:$(selector).prependTo(content)参数列表:参数描述selector要被插入的匹配元素。content要被插入匹配...
DOM内部插入prepend()与prependTo()
qq_37036642的博客
08-02 822
在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo 选择器的描述：   通过右边代码可以看到prepend与prependTo的使用及区别： .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
逝者如风
07-02 9593
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt; &lt;link rel="stylesheet" href="css/rest.css" /&g
js prepend()和append()的区别
qq_38950979的博客
02-25 1684
prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。 prepend() 语法：$(selector).prepend(content) 或 $(selector).prepend(function(index,html)) prependTo() 语法：$(content).prependTo(selector) 提示：prepend() 和 prependTo() 方法作...
jQuery--插入节点之内部插入（append()、appendTo()、prepend()、prependTo()）详解
吴声子夜歌的博客
10-02 3437
插入节点 在动态创建HTML元素节点后，还需将节点插入到文档中才有用。根据元素的插入位置不同，插入方法分为内部插入和外部插入，如下表： 类型 方法 描述 内部插入 append() 向每个匹配的元素内部追加由参数指定的内容 appendTo() 把所有匹配的元素追加到指定的元素中 prepend() 向每个匹配的元素内部前置内容 外部插入 after() 在每个匹配...
prepend 和 prependTo的区别
panchuanyang的博客
02-24 2093
如果我们想在两个p标签的内容前面插入'苹果',该怎么做呢?&lt;p&gt;p1&lt;/p&gt; &lt;p&gt;p2&lt;/p&gt;1.使用append $('p').prepend('苹果')//在p标签的前面 加上 '苹果'//结果为 &lt;p&gt;苹果p1&lt;/p&gt; &lt;p&gt;苹果p2&lt;/p&gt;2.使用appendTo$('苹果')
prepend()与prependTo()函数实例
行天之路
11-14 2570
在jquery中，prepend()与prependTo()函数有着相同的功能，完成相同的事。即添加一个文本或html内容到匹配元素内容的前面。其主要的差别是语法上的差别。   例如： divclass="box">I'm a big box/div> divclass="box">I'm a big box 2/div> 1. $(‘selector’).prepend(‘ne
创建DOM节点prepend()、prependTo()
凌晨de太阳
09-11 1087
1、prepend()：在指定元素的前面插入指定的内容 $("#rood").prepend('插入的新内容！！！！'); }) 2、prependTo()：与prepend类似，也用于动态添加DOM节点。 $('插入的新内容！！！！').prependTo("#rood"); 无标题文档 $(function(){ //$("#rood").prepend('插入
jquery prepend和prependTo的区别
最新发布
05-26
`prepend` 和 `prependTo` 都是 jQuery 中的方法，它们的作用都是在指定元素的开头插入指定的内容。不同之处在于它们的语法结构和作用对象的不同。 `prepend` 方法的语法结构如下： ``` $(selector).prepend...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值