`
joan0106
  • 浏览: 141633 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

jQuery的append,clone,replaceWith的用法

jQuery旅游JavaScriptHTML 
阅读更多 
<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加到开头

0
顶
3
踩
分享到：
| MyEclipse8.0M安装Extjs插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery 文档操作方法

    本文将对 jQuery 文档操作方法进行详细的介绍，包括方法的语法、参数、返回值、使用场景和示例代码等。 addClass() 方法 addClass() 方法用于向匹配的元素添加指定的类名。该方法可以将一个或多个类名添加到元素上...

    Jquery节点插入、复制和替换方法

    JQuery提供了两种替换DOM节点的方法：`replaceWith()`和`replaceAll()`。 ##### replaceWith() 此方法用指定的HTML字符串或DOM元素替换当前集合中的每个元素。例如： ```javascript $("#oldElement").replaceWith...

    jQuery插入节点1

    jQuery 提供了多种方法来插入节点，包括 `append()`、`appendTo()`、`prepend()`、`prependTo()`、`after()`、`insertAfter()`、`before()` 和 `insertBefore()`。 * `append()` 方法将节点追加到匹配到的子元素的...

    Jquery 中文API 2.2与1.83

    本文将深入探讨jQuery中文API 2.2和1.83版本中的关键功能和用法。 一、选择器（Selectors） jQuery的选择器功能强大，能够直接通过CSS语法选取DOM元素。在2.2和1.83版本中，包括ID选择器(#id)，类选择器(.class)，...

    jQuery文档处理.

    1. 插入元素：jQuery提供了多种插入方法，如`append()`、`prepend()`、`before()`和`after()`，可以方便地在现有元素前后插入新的HTML内容。 2. 删除元素：`remove()`方法用于删除匹配的选择器的所有元素。 3. 克隆...

    JQuery新版中文手册

    JQuery开发手册 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc]) jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get...

    jQuery1.11.0_中文版.chm.zip

    3. 复制和替换：`.clone()`, `.replaceWith()`, `.replaceAll()`提供了元素复制与替换功能。 三、CSS操作 jQuery提供了便捷的CSS操作接口，如`.css()`, `.addClass()`, `.removeClass()`, `.toggleClass()`，使得...

    jquery最新中文手册

    3. **DOM操作**: jQuery提供了便利的API用于元素的添加、删除、复制和替换，如`append()`、`remove()`、`clone()`和`replaceWith()`。 4. **事件处理**: jQuery简化了事件绑定，`click(function(){...})`用于绑定...

    Jquery学习笔记分享

    本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：jQuery概述 1. **jQuery基本作用**：jQuery的主要目标是使JavaScript编程变得更加简单，它提供了一种更简洁的语法来处理DOM操作、事件处理、...

    jQuery_使用手册

    jQuery提供了丰富的DOM操作方法，如`.append()`, `.prepend()`, `.after()`, `.before()`, `.remove()`, `.empty()`, `.clone()`, `.wrap()`, `.unwrap()`, `.replaceWith()`, `.replaceAll()`等，使得DOM的操作变得...

    jQuery详细教程

    jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循...

    jQuery 1.5 API 中文版

    IE用户无法在线查看本文档，请下载jQuery API Version1.5 中文版AIR客户端查看，或者使用chrome，safari，firefox，opera等浏览器查看！！！ jQuery 1.5 API Cheat Sheet来源 Selectors Basics #id element .class, ...

    jquery_api.详解

    1. 添加、删除和替换元素：`append()`用于在元素内部结尾处添加内容，`prepend()`则在开头添加，`remove()`用于删除元素，`replaceWith()`可以替换元素。 2. 获取和设置属性：`attr()`用于获取或设置元素的属性，如`...

    详解jQuery中的DOM操作

    复制节点可以使用`clone()`，如果传递`true`作为参数，连同事件和数据也会被复制。例如，`$(this).clone(true).appendTo($('ul'))`会复制当前选中的`&lt;li&gt;`元素并添加到`&lt;ul&gt;`中。 替换节点有`replaceWith()`和`...

    JQuery进阶.docx

    通过学习和熟练掌握这些jQuery的DOM操作方法，开发者可以更方便地实现网页动态更新、内容交互等高级功能。在实际项目中，结合使用jQuery的事件处理和动画效果，可以创建出更加用户友好的Web应用。

    JQuery1.4 API

    以上只是jQuery 1.4 API 的一部分功能，实际上还有更多高级用法和插件可供开发者使用。理解并熟练掌握这些知识点，将有助于提升开发效率，创建出更具交互性和用户体验的网页应用。在实际开发中，结合具体的项目需求...

    JQuery版动态为HTML增加标签.rar

    可以使用`clone()`、`detach()`等方法保存和恢复元素，避免反复查找和创建。 8. **使用CSS类进行样式操作**： jQuery允许通过`.addClass()`, `.removeClass()`, 和 `.toggleClass()`来切换元素的CSS类，这对于动态...

    jquery 选择器 描述

    通过以上详尽的解析，我们可以看到jQuery选择器的强大功能和灵活性，以及jQuery提供的DOM操作方法，它们共同构成了前端开发中不可或缺的工具箱。无论是选择特定元素进行样式调整，还是动态创建和操作DOM节点，jQuery...

Magicbox
Global site tag (gtag.js) - Google Analytics