jQuery技术

jquery 添加新元素append(),appendTo()等用法详解 Linzl技术汇

字号+ 作者:H5之家 来源:H5之家 2016-08-12 15:03 我要评论( )

在Jquery中,动态的添加元素有以下一下方法 (一)after()和before()方法的区别 after()——其方法是将方法里面的参数添加到jquery对象后面去; 如:A.after(B)的意思是将B放到A后面去; $("#DIV").after(" ba href="www.linzl.com"linzl技术汇/a/b"); befor

在Jquery中,动态的添加元素有以下一下方法

(一)after()和before()方法的区别

       after()——其方法是将方法里面的参数添加到jquery对象后面去;

       如:A.after(B)的意思是将B放到A后面去; 

$("#DIV").after(" <b><a href="www.linzl.com">linzl技术汇</a></b>");

       before()——其方法是将方法里面的参数添加到jquery对象前面去。

       如:A.before(B)的意思是将A放到B前面去;

("<b><a href="www.linzl.com">linzl技术汇</a></b>").after($("p"));

(二)insertAfter()和insertBefore()的方法的区别

       其实是将元素对调位置;

       可以是页面上已有元素;也可以是动态添加进来的元素。

       如:A.insertAfter(B);即将A元素调换到B元素后面;

       如<span>CC</span><p>HELLO</p>使用$(“span”).insertAfter($(“p”))后,就变为<p>HELLO</p><span>CC</span>了。两者位置调换了

(三)append()和appendTo()方法的区别

       append()——其方法是将方法里面的参数添加到jquery对象中来;

append(content) 向每个匹配的元素内部追加内容。 这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。

       如:A.append(B)的意思是将B放到A中来,后面追加,A的子元素的最后一个位置;

$('p.append_p').append('<b><a href="http://www.linzl.com/" target="_blank">linzl技术汇</a></b>');

        appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。

        如:A.appendTo(B)的意思是将A放到B中去,后面追加,B的子元素的最后一个位置;

$('<b><a href="http://www.linzl.com/" target="_blank">linzl技术汇</a></b>').appendTo('p.appendto_p');

(四)prepend()和prependTo()方法的区别

         append()——其方法是将方法里面的参数添加到jquery对象中来;

         如:A.append(B)的意思是将B放到A中来,插入到A的子元素的第一个位置;

         appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。

         如:A.appendTo(B)的意思是将A放到B中去,插入到B的子元素的第一个位置;

(一)(二)方法与(三)(四)方法的区别就在于:后者是外部插入,即在元素外面添加,作为元素的兄弟节点;

前者是在内部插入,即在元素内部进行添加,作为元素的子节点。

第(一)(二)方法很相似。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 如何编写 jQuery 插件

    如何编写 jQuery 插件

    2016-08-12 16:00

  • jquery学习总结(超级详细)

    jquery学习总结(超级详细)

    2016-08-10 17:01

  • jQuery Mobile 和 JSON

    jQuery Mobile 和 JSON

    2016-08-07 17:01

  • jQuery操作checkbox选择(list/table)

    jQuery操作checkbox选择(list/table)

    2016-08-07 16:00

网友点评