`

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、insertBefore、after与insertAfter方法注意事项

    jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项

    jQuery操作元素追加内容示例

    主要介绍了jQuery操作元素追加内容,结合完整实例形式分析了jquery页面元素追加相关操作方法,包括append、appendTo、prepend、prependTo等方法使用技巧,需要的朋友可以参考下

    【JavaScript源代码】jQuery实现动态向上滚动.docx

    jQuery实现动态向上滚动  本文实例为大家分享了jQuery... 而循环的实现:appendTo()或者append,三目运算符(或者 if else),insertBefore()或者prepend()等等好多种方法。 代码: &lt;!doctype html&gt;  &lt;html&gt;  &lt;

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

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

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

    如$(A).append(B)与$(B).appendto(A)是等价的 prepend() 向每个匹配的元素内部前置内容 prependTo() 把所有匹配的元素前置到另一个指定的元素集合中。实际上是颠倒了preprend()的用法。如$(A).pr

    jQuery DOM插入节点操作指南

    方法 描述 示例 append() 向每个匹配的元素内部追加内容 ...jQuery代码: $(“p”).append(“你好”);...appendTo() ...的$(A).append(B)的操作,是将A追加到B中。...$(“你好”).appendTo(“p”) ...prepend() 向每个匹配

    锋利的jQuery jQuery中的DOM操作

    $(“selector”).append() 向每个匹配的元素内部追加内容$(“selector”).appendTo() 等价于.append()操作符左右互换 $(“selector”).prepend() 向每个匹配的元素内部前置内容$(“selector”).prependTo() 等价...

    JQuery中DOM节点的操作与访问方法实例分析

    已有对象.append(要添加的对象) 作为最后一个子元素添加 要添加的对象.appendTo(已有对象) prepend()/prependTo() 作为第一个子元素添加 已有元素.before(要添加的元素)/after() 在对象前面/...

    有关jquery与DOM节点操作方法和属性记录

    A.append(B)       B       A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置;若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到...

    JQuery在页面中添加和除移DOM示例代码

    1.before():将新节点添加到前面 2.after():将节点添加到低部 3.prepend():把节点变成第一个节点 4.append():把新节点添加到末端,与appendTo()效果相同,只是语法上有差异 5.remove():除移节点 示例: ...

    Jquery实验报告.doc

    $parent.prepend($li_2); $li_3.insertAfter($two_li); var $one_li=$("ul li:eq(1)"); var $two_li=$("ul li:eq(2)"); $two_li.insertBefore($one_li); $("ul li:eq(1)").appendTo("ul"); $("ul li").remove("li...

    JQuery1.3笔记.txt

    一個隨身的技巧手冊,txt版本的,所以,廣大友人可以在公車上,電梯間,抑或者睡前三分鐘,鞏固和複習, 減少浪費生命的行為 Attribute: $(“p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(“img”)....

    JQuery新版中文手册

    prepend(content|fn) prependTo(content) 外部插入 after(content|fn) before(content|fn) insertAfter(content) insertBefore(content) 包裹 wrap(html|ele|fn) unwrap() wrapall(html|ele) wrapInner...

    jQuery详细教程

    hide() 和 show() 都可以设置两个可选参数:speed 和 callback。 语法: $(selector).hide(speed,callback) $(selector).show(speed,callback) speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", ...

    Jquery 1.3 简体中文手册

    appendTo(content) prepend(content) prependTo(content) 外部插入 after(content) before(content) insertAfter(content) insertBefore(content) 包裹 wrap(html) wrap(elem) wrapAll(html) wrapAll(elem...

    JQuery 1.3 中文参考手册

    appendTo(content) prepend(content) prependTo(content) 外部插入 after(content) before(content) insertAfter(content) insertBefore(content) 包裹 wrap(html) wrap(elem) wrapAll(html) wrapAll(elem...

    jQuery1.4 API

    image :reset :button :file :hidden 表单对象属性 :enabled :disabled :checked :selected 文档处理内部插入 append(content | fn) appendTo(content) prepend(content | fn) prependTo(content) 外部插入 after...

Global site tag (gtag.js) - Google Analytics