append、prepend 、after、 before的区别

今天网上查资料的时候看到了 append与prepend 现在总结下以上几个方法的区别

利用代码展示,例子

html

<div class="test1"><p>这个是用来测试append的</p></div>

<ul class="test2"><li></li></ul>

<script>

$(document).ready(function(){

var txt1=$( " <b></b>").text("love");

$(".test1").append(txt1);

alert($(".test1").html)

})

</script>

显示结果:



先是弹出,test1下所有的子元素,其中新增的<b></b>在test1中

此处我们再稍微写下appendTo方法与append的区别

以上个例子的HTML为模板

var txt = $("").text("love appendTo");          

  txt.appendTo(".test1")         

   alert("append-----"+$(".test1").html())



由此可见,append与appendTo的作用是一样的,只不过是写法是反的,假如div里面想增加一个a,如果是append的话$("div").append(a),如果是appendTo的话,就要返回来,$("div").append(a)

第二个例子:

<div class="test2"><p>这个是用来测试after的</p></div>

var txt2=$( "").text("hello world");           

 $(".test2").after(txt2)            

alert("after+++++"+$(".test2").html())

展示结果如下:



弹出所有的子元素,<i></i>并不在test2下面

prepend与before与上述类似。



总结如下:

append() & prepend()是在元素内插入内容(该内容变成该元素的子元素或节点),after() & before()是在元素的外面插入内容(其内容变成元素的兄弟节点)

1、append() - 在被选元素的结尾插入内容

2、prepend() - 在被选元素的开头插入内容

3、after() - 在被选元素之后插入内容

4、before() - 在被选元素之前插入内容

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 创建 $('body').append($(" ")) //向body 中插入一个 div 插入 append:...
    学开船不会开船阅读 320评论 0赞 1
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 744评论 0赞 3
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,757评论 0赞 44
  • 一)jQuery九类选择器【参见jQueryAPI.chm手册】 目的:通过九类选择器,能定位web页面(HTML...
    奋斗的老王阅读 1,113评论 0赞 51
  • 前言 dom也就是文档对象模型,是针对HTML和XML的一个api,描绘了一个层次化的节点树。虽然浏览器原生给我们...
    谦龙阅读 2,510评论 0赞 1

友情链接更多精彩内容