`

append,appendTo和prepend 区别

阅读更多

1.append(content)

向每个匹配的元素内部追加内容。

1 <div>
2 <p name="p1">p1</p>
3 </div>

比如要向div中再添加一个p标签:

$('div').append('<p name="p2">p2</p>');  //结果为:

<div>
    <p name="p1">p1</p>
    <p name="p2">p2</p>
</div>

2.appendT0(content)

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

如果想达到append()中的效果,则代码如下:$('<p name="p2"></p>').appendTo('div').

3.prepend(content)

向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式。

prepend(function(index, html))

返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。

例1效果:$('div').prepend(function(0,'<p name="p2">p2</p>'));

小结:append(),appendTo()和prepend()都是在匹配元素的标签内追加,不同在于:append()和appendTo()是在元素的后面追加,而prepend()是在元素的最前面追加。

分享到:
评论

相关推荐

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

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

    节点的插入之append()和appendTo()的用法介绍

    除了`append()`和`appendTo()`,还有一个相关的`prepend()`方法,它与`append()`类似,但会在元素的开头插入内容,而不是结尾。同时,`prependTo()`则是`prepend()`的反向版本,将内容添加到目标元素的开头。 在第...

    jQuery中append、insertBefore、after与insertAfter方法注意事项

    在使用jQuery进行DOM操作时,append、prepend、before和after方法是经常使用的,它们可以帮助开发者以不同的方式动态地修改页面内容。同时,appendTo、prependTo、insertBefore和insertAfter则是对应的以元素为目标...

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

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

    jQury-DOM篇学习笔记

    对于内部操作(`append`, `prepend`, `appendTo`, `prependTo`),它们的主要区别在于插入内容的位置(元素的末尾或开头),而对于外部操作(`after`, `before`, `insertAfter`, `insertBefore`),区别在于内容与...

    jQuery中append()方法用法实例

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

    JQ 插入节点和移动节点

    1. `appendTo()`和`prependTo()`:这些方法与`append()`和`prepend()`类似,但它们将匹配的元素移动到另一个元素的末尾或开头,而不是复制它们。 2. `insertAfter()`和`insertBefore()`:同样,这些方法也用于移动...

    14jQueryDOM节点操作.docx

    - **前置插入**:`prepend()`和`prependTo()`与`append()`和`appendTo()`类似,只是内容会被放置在元素的开头: ```javascript // 使用prepend() $("#container").prepend("这是前置的内容&lt;/h1&gt;"); // 使用...

    juqery 学习之五 文档处理 插入

    2. **appendTo(content)**: 与`append()`相反,`appendTo()`方法将所有匹配的元素追加到指定的目标元素或元素集合中。在这里,我们将元素A添加到元素B中,而不是将B添加到A中。比如,我们要将所有段落追加到id为"foo...

    jQuery学习之DOM节点的插入方法总结

    内部操作的四个方法`append()`, `prepend()`, `appendTo()`, `prependTo()`主要区别在于插入内容和目标元素的位置。`append()`和`prepend()`是将内容作为参数放在方法调用之后,而`appendTo()`和`prependTo()`则是将...

    jQuery操作元素追加内容示例

    本文主要讲解jQuery中用于元素追加内容的几个核心方法:append、appendTo、prepend、prependTo,以及它们的使用技巧。 1. `append()` 方法: `append()` 方法用于向匹配的元素内部追加内容。内容可以是HTML字符串或...

    jquery框架动态的修改table

    jQuery提供了丰富的API来操作这些元素,例如`$('selector')`用于选择元素,`.html()`用于获取或设置元素的内容,`.append()`、`.prepend()`、`.insertBefore()`和`.insertAfter()`用于添加新的内容。 1. 动态创建...

    JQuery进阶.docx

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

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

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

    jQuery和JavaScript节点插入元素的方法对比

    值得注意的是,`appendTo()`和`prependTo()`是`append()`和`prepend()`的反向操作,它们改变了插入元素和目标元素的位置关系。 对于节点外部插入,jQuery提供以下两个方法: 5. `after()`:此方法会在每个匹配元素...

    详解jQuery中的DOM操作

    插入节点分为多种方式:`append()`和`appendTo()`用于在元素末尾添加内容,`prepend()`和`prependTo()`用于在元素开头添加,`after()`和`insertAfter()`在元素后插入,`before()`和`insertBefore()`在元素前插入。...

Global site tag (gtag.js) - Google Analytics