`
happyqing
  • 浏览: 3198258 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery after append appendTo三个函数的区别

阅读更多

jq文档的说明是

1、after函数

定义和用法:

after() 方法在被选元素后插入指定的内容。

语法:

$(selector).after(content)

实例:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
  $("button").click(function(){
    $("span").after("<a href="#">ddddd</a>")

  })
})
</script>
</head>

<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>

结果如下:

<span>aaaaaaaaaaaaaaa</span>
<a href="#">ddddd</a>

span标签后面多了一个a标签

 

2、append函数

定义和用法:

append() 方法在被选元素的结尾(仍然在内部)插入指定内容。

语法:

$(selector).append(content)

实例:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
  $("button").click(function(){
    $("span").append("<a href="#">ddddd</a>")

  })
})
</script>
</head>

<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>


 

结果如下:

<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
span标签里面多了一个a标签

 

 

3、appendTo函数

定义和用法:

appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。

语法:

$(content).appendTo(selector)实例:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
  $("button").click(function(){
   // $("span").appendTo("<a href="#">ddddd</a>"),这样的写法是不正确的

$("<a href="#">ddddd</a>").appendTo("span")

  })
})
</script>
</head>

<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>


 

结果如下:

<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
span标签里面多了一个a标签

效果和append函数是一样,只不过它们的写法是反着来写的而已

分享到:
评论

相关推荐

    jquery函数 强大的封装

    6. **DOM操作**:jQuery提供了一系列的DOM操作方法,如`.clone()`复制元素,`.before()`、`.after()`在元素前后插入内容,`.detach()`保留元素状态的同时移除它,`.appendTo()`、`.prependTo()`则是元素位置的反转。...

    jquery函数大全

    《jQuery函数大全详解》 jQuery库是JavaScript中最广泛使用的库之一,它简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是一份详尽的jQuery函数大全,涵盖了基础函数实现及其用法。 1. **Attribute操作**: ...

    JQuery函数大全

    - 第三个示例将图片的 `title` 属性设置为其 `src` 值。 ##### 3. **获取/设置 HTML 内容** - **`$(selector).html()`** 和 **`$(selector).html(htmlString)`** - 示例: - `$("#element").html();` 获取元素...

    jquery 追加元素append、prepend、before、after用法与区别分析

    此外,jQuery还提供了与append和prepend对应的另外两个方法,即appendTo和prependTo,它们是append和prepend方法的反向操作。 在具体用法上,append、prepend、after和before方法都可以接受字符串、DOM元素、jQuery...

    jQuery中append()方法用法实例

    #### append()方法与appendTo()方法的区别 虽然`append()`方法和`appendTo()`方法在功能上是相同的,都是在目标元素末尾插入内容,但它们的语法结构不同。`append()`方法是选择器方法,是元素调用的,而`appendTo()...

    jquery 常用函数集

    ### jQuery常用函数集详解 #### 一、DOM操作 **1. 属性操作** - **`.addClass()`**:为元素添加一个或多个类名。例如: ```javascript $(p).addClass("css样式"); ``` 这将为所有匹配的`&lt;p&gt;`元素添加指定的...

    jquery和javascript的区别(常用方法比较)

    在创建元素并添加到文档中,`JavaScript` 的 `createElement` 和 `appendChild` 方法相比 `jQuery` 的 `append()`、`appendTo()`、`prepend()` 和 `prependTo()` 方法显得较为繁琐。`jQuery` 这些方法提供了更加灵活...

    jQuery详细教程

    三. jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。 通常会把 jQuery 代码放到 部分的...

    jQuery插入节点1

    jQuery 提供了 `wrap()`、`wrapAll()` 和 `wrapInner()` 三个方法来包裹节点。 * `wrap()` 方法将指定节点用其他标记包裹起来,该方法对于需要在文档中插入额外的结构化标记非常有用。 * `wrapAll()` 方法将所有...

    50个Jquery经典实例

    11. **DOM插入与删除**:`append()`, `prepend()`, `before()`, `after()`用于在元素前后添加内容,`remove()`和`empty()`移除元素或清空内容。 12. **克隆元素**:`clone()`用于复制元素,如`$("#elem").clone()....

    jquery-1.1.3 效率提高800%

    有效的类型(返回的类型的结果值会作为第一个参数传递给success指定的回调函数)有: "xml": 返回一个可以由jQuery处理的XML文档。 "html": 返回文本格式的HTML代码。包括求值后的脚本标记。 "script": 将响应...

    jQuery函数大全

    ### jQuery函数大全详解 #### 一、DOM操作 ##### 1. 属性操作 - **`.addClass(cssClass)`** - 功能:为选中的元素添加一个或多个类。 - 示例:`$(p).addClass("highlight");` - 解释:此方法将“highlight”类...

    Jquery-1.9.1源码分析系列(十一)之DOM操作

    DOM操作包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip。  DOM操作函数中后五种方法使用的依然是前面五种方法,源码 ...

    JQuery新版中文手册

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

    jQuery 1.4 中文手册(速查表) chm

    - **DOM操作**: `appendTo()`、`appendTo()`、`before()` 和 `after()` 方法用于插入元素。 - **事件**: `bind()`、`unbind()`、`trigger()` 用于事件绑定、解绑和触发。 - **CSS操作**: `css()` 方法用于获取或设置...

    JQuery进阶.docx

    - `appendTo(content)`:与`append`相反,将所有匹配的元素追加到另一个指定的元素中。例如,`$("p").appendTo("div");`将所有段落追加到div元素里。 - `prepend(content|fn)`:向每个匹配的元素内部前置内容。如`...

Global site tag (gtag.js) - Google Analytics