之前做项目对于这几个的方法总是有点模糊,尤其是prepend和prependTo;

1.append

<style>
span{
background:yellow;
}
.test{
background:#ccc;
height:50px;
}
.test_1{
background:red;
} </style>
<body>
<div class="test"><span class="test_1">我就站在这里</span></div>
</body>
<script>
$('.test').append("<span>我是测试快</span>");
</script>

append是插入元素内部的后面

2.appendTo

$('<span>我是测试快</span>').appendTo($('.test'));

和上面产生一样的效果,就是写法换了一下

3.prepend

$('.test').prepend("<span>我是测试快</span>");

这个方法和append做对比

append是插入元素内部的后面,而prepend是插入元素内部的最前面

4.prependTo

$('<span>我是测试快</span>').prependTo($('.test'));

上面的效果和prepend中的效果一样

关于append,appendTo,prepend,prependTo的区别的更多相关文章

  1. jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别

    jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...

  2. jQuery中append()、prepend()与after()、before()的区别

    转载 未曾见海  https://www.cnblogs.com/afei-qwerty/p/6682963.html 在jQuery中,添加元素有append(),prepend() 和 after ...

  3. jq中append()、prepend()、after()、before()的区别

    jq中append().prepend().after().before()的区别详解 .append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标 ...

  4. JavaScript 中 append()、prepend()、after()、before() 的区别

    内容 append().prepend().after().before() 的区别 jQuery 操作 DOM 之添加节点 方法名 作用 $(selector).append() 指定元素内部添加, ...

  5. JQuery中after() append() appendTo()的区别

    首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").afte ...

  6. jquery中append、prepend, before和after方法的区别(一)

    原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该 ...

  7. jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)

    jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...

  8. 比较jquery中的after(),append(),appendTo()方法

    html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...

  9. 添加新内容的四个 jQuery 方法:append,prepend,after,before

    添加新内容的四个 jQuery 方法区别如下: append() - 在被选元素(里面)的结尾插入内容prepend() - 在被选元素(里面)的开头插入内容 //jQuery append() 方法 ...

随机推荐

  1. http-bio-8080"-exec-6

    现象如下:   Tomcat7启动后,后台抛出如下异常,前台一直无法登陆   Exception in thread ""http-bio-8080"-exec-6&qu ...

  2. 15、Semantic-UI之导航

    15.1 面包屑导航   在Semantic-UI中有多种样式实现面包屑导航,类似 / > 等. 示例:定义定义基础面包屑导航 <div class="ui container& ...

  3. C++-结构体,联合体,枚举,的区别

    结构体: struct  NUM { int number; }a; 结构体是声明只是一个模型,没有分配内存空间.当进行定义结构体变量后才分配内存空间 联合体: union  data { int a ...

  4. DELPHI XE5/6/7 android 无线真机调试

    一.下载adbWireless 地址:http://sj.zol.com.cn/detail/41/40834.shtml 安装,需要ROOT权限. 运adbWireless.界面很简单,就一个大按钮 ...

  5. vmware虚拟机监控数据

    在vsphere产品中内建一个监控所有虚机包括主机资源的插件,叫做vcenter servcie status,这个插件的主要功能是记录当前虚拟机资源的cpu.硬盘.内存和网络等相关信息.通过它可以查 ...

  6. How can i use iptables on centos 7 or fedora?

    http://stackoverflow.com/questions/24756240/how-can-i-use-iptables-on-centos-7 # sudo service iptabl ...

  7. MVC ASP.NET MVC5使用Area区域

    MVC  ASP.NET MVC5使用Area区域 一.为什么要使用area? 在大型的ASP.NET mvc5项目中一般都有许多个功能模块,这些功能模块可以用Area(中文翻译为区域)把它们分离开来 ...

  8. 「HNOI 2013」消毒

    题目链接 戳我 \(Solution\) 我们首先想一想如果这一题只是二维的该怎么办? 就是一个最小点覆盖问题.这里就不详细解释了,用网络流或匈牙利都无所谓. 但现在是三维的,那么现在该如何处理呢? ...

  9. HAOI2010 订货

    题目链接:戳我 费用流. 将每天分成早上和晚上两个点.源点向早上连容量INF,费用为进货量的边.早上向汇点连容量供货量,费用0.早上向晚上连容量为S,费用为0的边.晚上向第二天早上连容量S,费用0.之 ...

  10. oracle ocp题库变化,052最新考试题及答案整理-30

    30.Which is true when a database instance is shut down? A. Only transactional and normal modes wait ...