append

<p>
<span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>

结果是这样的:

<p>
<span class="s1">s1</span>
<span class="s2">s2</span>
</p>

after

<p>
<span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>

结果是这样的:

<p>
<span class="s1">s1</span>
</p>
<span class="s2">s2</span>

总结:

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

jQuery - 添加元素append/prepend和after/before的区别的更多相关文章

  1. jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

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

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

  3. Jquery添加元素append及阻止表单提交submit

    HTML代码: <td><input name="duration[]" value="" type="text" /&g ...

  4. jquery的append/prepend和after/before有什么区别呢?

    append <p> <span class="s1">s1</span> </p> <script> $(" ...

  5. jquery after append appendTo三个函数的区别

    jq文档的说明是 1.after函数 定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html> & ...

  6. jQuery 添加元素和删除元素

    jQuery - 添加元素 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元 ...

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

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

  8. jquery中append跟prepend的用法

    jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body"). ...

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

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

随机推荐

  1. php的json_encode第二个参数学习及应用

    php5.4以上: json_encode($data, JSON_FORCE_OBJECT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE); p ...

  2. checkbox之全选和反选

    先导入jquery组件 <input type="checkbox" id="checkall">全选<input type="ch ...

  3. 全栈项目|小书架|服务器端-NodeJS+Koa2实现首页图书列表接口

    通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看 ...

  4. .net Dapper 实践系列(1) ---项目搭建(Layui+Ajax+Dapper+MySQL)

    目录 写在前面 一.前期准备 1.在MySQL创建数据库 2.创建项目 3.安装程序包 4.添加插件 5.添加DbOption文件夹 6.添加实体类 写在前面 学习并实践使用Dapper 这个小型的O ...

  5. 有关ajax跨域问题

    写在前面 JQuery ajax支持get方式的跨域,采用了jsonp来完成.完成跨域请求的有两种方式实现.一种是使用Jquery ajax最底层的Api实现跨域的请求,而另一种则是JQuery aj ...

  6. docker save load export import的区别

    export export命令用于持久化容器(不是镜像).所以,我们就需要通过以下方法得到容器ID: sudo docker ps -a 接着执行导出: sudo docker export < ...

  7. 2019 小米java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.小米等公司offer,岗位是Java后端开发,因为发展原因最终选择去了小米,入职一年时间了,也成为了面试官,之 ...

  8. Spring对于事务的控制@Transactional注解详解

    引用自:https://blog.csdn.net/fanxb92/article/details/81296005 先简单介绍一下Spring事务的传播行为: 所谓事务的传播行为是指,如果在开始当前 ...

  9. js的一些较为常见的语句算法题

    下面各题解法可能存在一些时间和空间复杂度问题,有些没有做到最优化,还请谅解!!! 1.用for循环实现10的阶乘. //使用for循环方法解答 var num = 10 var sum = 1; va ...

  10. 关于 Safari 浏览器不支持 location [ window.location.href window.open()] 跳转问题的解决方案

    最近在做项目时,碰到 safari 浏览器不支持location跳转问题,针对此问题,可以通过 js 模拟点击时间来解决,代码如下: <!DOCTYPE HTML> <html la ...