jQuery的append,clone,replaceWith的用法

最新推荐文章于 2022-06-01 15:34:23 发布
最新推荐文章于 2022-06-01 15:34:23 发布
阅读量186 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery 旅游 JavaScript HTML ViewUI 
<body>
    <p>This is a test</p>   
    <span>喜欢写代码</span>
</body>

 

1、append和prepend

相同点：都可以在本标签内进行html内容的插入

不同点：append把html的内容插到本标签的尾部，而prepend则把内容插入到本标签的头部

JS代码：

  <script type="text/javascript">
    $(document).ready(function(){
	   $('span').append('<div>插入到span标签的尾部</div>');
	   $('span').prepend('<div>喜欢旅游,插入到span标签的头部</div>');
	})
  </script>

 结果：append :<p>This is a test</p>  
                     <span>喜欢写代码

                       <div>append插入到span标签的尾部</div>

                     </span>

     prepend : :<p>This is a test</p>  
                     <span>                        

                       <div>prepend喜欢旅游,插入到span标签的头部</div>

                       喜欢写代码                     

                     </span>

 

2、appendTo和prependTo

相同点：把所有匹配的元素追加到另一个指定的元素集合中。

不同点：appendTo加到是结尾，prependTo加到开头

joan0106
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jq操作节点：append、appendTo、prepend、prependTo、before、insertBefore、after、insertAfter、remove、empty、clone（）
YY的博客
11-18 539
append、appendTo、prepend、prependTo、before、insertBefore、after、insertAfter、remove（）、empty（）、html（“”）、replaceWith（）、replaceAll（）、clone（）
jquery的clone()和replaceAll(),replaceWith()
weixin_30381793的博客
10-05 89
<body> <button>保存</button><p>段落</p> <p>tttttttt</P></body> <script language="JavaScript"> //button增加事件$("button...
JQuery中append(function(index,html)),appendTo(),after(function(index,html)),clone()方法
ystyaoshengting的专栏
08-18 5865
不多说废话，直接说要点 1. append(function(index, html)) 该方法是版本1.4 中新增的，其功能是将一个function 函数作为append 方法的参数，该 函数的功能必须返回一个字符串，作为append 方法插入的内容，其中index 参数
jquery html移动,复制,替换函数(append,clone,replaceWith等)
micool的专栏
02-17 4307
在做web前端的时候，我们经常会做一个特效，这个时候用到ajax来进行无刷新页面，来改变页面的内容，这个时候，我们就会对页面中的html进行添加，替换等，在接触jquery的这些html操作函数之前，我一般都是用js来完成的。个人觉得最快最方便的做法就是document.getElementById，document.getElementsByName这些方法，例如document.getElem
jQuery 文档操作 - replaceWith() 方法
张默的博客
01-15 742
实例 使用新文本替换第一个P元素： $(".btn1").click(function(){ $("p").replaceWith("&lt;b&gt;Hello world!&lt;/b&gt;"); });   定义和用法 replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。 提示：replaceWith() 与 replaceAll() 作用相同...
使用jQuery操作DOM的方法小结
10-20
3. 插入节点：可以使用append(content)、prepend(content)、after(content)和before(content)等方法来向选定元素的内部或外部插入内容。 4. 删除节点：remove()方法可以从DOM中删除被选元素。 5. 替换节点：...
jquery 操作DOM的基本用法分享
10-28
如果想要复制某个节点，可以使用 `clone()` 方法，并通过参数决定是否复制元素上的事件。 替换节点是一个将某个元素替换成另一个元素的过程，`replaceWith()` 方法提供这样的功能。此外，通过 `wrap()` 方法可以将...
jQuery插入节点1
08-08
jQuery 提供了多种方法来插入节点，包括 `append()`、`appendTo()`、`prepend()`、`prependTo()`、`after()`、`insertAfter()`、`before()` 和 `insertBefore()`。 * `append()` 方法将节点追加到匹配到的子元素的...
Jquery学习笔记分享
最新发布
11-24
本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：jQuery概述 1. **jQuery基本作用**：jQuery的主要目标是使JavaScript编程变得更加简单，它提供了一种更简洁的语法来处理DOM操作、事件处理、...
domManip之prepend,append,before,after,replaceWith方法
高山上的鱼
10-11 833
prepend源码解析(domManip参见博客打开)： CodePlayer     var $n1 = $("#n1"); //将一个strong标记追加到n1内部的起始位置 $n1.prepend( '追加内容' ); alert($("#n1")[0].firstChild.id);//打印test，说明prepend是在第一个子元素前面插入的 prepend: funct
JavaScript 学习-37.jQuery 添加/删除/替换元素
qq_27371025的博客
06-01 2158
添加元素主要用到四个方法 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容
jQuery clone( ) 方法
m0_57835615的博客
06-11 1557
语法格式： $(selector).clone(true[false])
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
热门推荐
幸福滴嘴角上扬的博客
09-07 17万+
最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。&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" h
jQuery总结四、append 与appendTo、after、before、wrap、unwrap、replaceWith、empty()、remove；detach、is、hasclass
m0_57446284的博客
09-29 1199
一、append 与appendTo 1.1.1 append append向每个匹配的元素内部追加目标 content：欲追加的内容String、Element、jQuery fn：function（index，html） index：对象在集合数组中的索引 html：对象源html内容 示例： $('#f0').append("<br>") //增加一份br标签 1.1.2 appendTo 追加当前对象到指定的元素中去 content：欲追加的内容Stri...
用jQuery的clone()方法拷贝元素
qq_37499398的博客
05-23 9785
Clone an Element Using jQuery除了移动元素，你还可以拷贝元素。简单理解：移动元素就是剪切，拷贝元素就是复制。jQuery的clone()方法可以拷贝元素。比如，如果我想把target2从left-well拷贝到right-well，我们可以这样写:$("#target2").clone().appendTo("#right-well");你有没有发现两个jQuery方法...
Jquery往网页插入数据遇到数据出现重复的问题
正在Android的学习路上
05-13 722
Jquery往网页插入数据遇到数据出现重复的问题
jQuery 删除、复制和替换元素
山水子农
07-16 2万+
一、使用jQuery删除元素 （1）、remove()移除所有匹配的元素   remove() 方法移除被选元素，包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。   但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同
JQUERY快速入门与实战
- 增加节点：使用`append()`、`prepend()`等方法。 - 插入节点：使用`after()`、`before()`等方法。 - 删除节点：`remove()`方法删除指定元素，`empty()`方法清空元素内容。 - 复制节点：`clone()`方法。 - 替换节点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值