添加新内容的四个 jQuery 方法:

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

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添加的更多相关文章

  1. 为jQuery添加Webkit的触摸方法支持

    前些日子收到邮件,之前兼职的一个项目被转给了其他人,跟进的人来问我相关代码的版权问题. 我就呵呵了. 这段代码是我在做13年一份兼职的时候无聊加上去的,为jQuery添加触摸事件的支持.因为做得有点无 ...

  2. jQuery添加删除元素

    $(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

  3. 给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动

    我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容 ...

  4. 如何为jquery添加方法

    以下内容引自一位网友的帖子: jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery ...

  5. JS添加节点方法与JQuery添加节点方法的比较及总结

    原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...

  6. Jquery 添加插件

    原文:http://www.iteye.com/topic/545971 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法 ...

  7. 用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  8. jQuery对象合并、jQuery添加静态方法、jQuery添加DOM实例方法

    实例效果: 代码演示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  9. jquery 添加与删除的规律 当要添加时候要定位到自己的父元素 当要删除时候 通过事件函数传入的this找到自己的父元素进行删除

    jquery 添加与删除的规律 当要添加时候要定位到自己的父元素  当要删除时候 通过事件函数传入的this找到自己的父元素进行删除

  10. 分别使用原生js和jQuery添加/删除元素的class属性

    一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...

随机推荐

  1. 从Java的角度修复文件下载漏洞

    从Java的角度谈下文件下载漏洞的产生,然后到他的修复方案.这里我的修复方案是白名单,而没有采用黑名单的方式. 首先先看一段存在文件下载漏洞的代码code: HTML视图页面  download.ht ...

  2. 通过jpa getResultList 获取查询到的内容

    String sql = "select * from spatial_event "; Query query = em.createNativeQuery(sql); // q ...

  3. HEOI2019 游记——240秒处的起死回生

    我还没死 Day-1 最后一场模拟赛! T1:自然数幂次和再前缀和,还是O(k)次多项式,拉格朗日插值,,,,,不能总想斯特林数啊!!! T2:神仙DP预处理... T3:AC自动机+LCA处差分+暴 ...

  4. bzoj2457 双端队列

    虽然分类在数据结构里,但是实际上是个贪心题...... 我自己一开始想到了一个错误的贪心.后来发现对于相等值的处理不行. 有个很神的转化,就是把排好序的队列以及对应的原下标都给搞出来. 然后考虑其中一 ...

  5. MD5加密解密类(asp.net)&使用MD5过时处理

    加密类 #region ========加密======== /// <summary> /// 加密 /// </summary> /// <param name=&q ...

  6. react-native中的动画

    先看效果 这个一个渐渐显示的动画,代码如下 import React from 'react'; import { Animated, Text, View } from 'react-native' ...

  7. python之网络编程--锁、信号量、线程、队列

    一.线程,可以发现顺序执行比开线程执行时间要短.原因是,一个进程中的多线程处理,由于存在GIL,并且GIL中只能存在一个线程,加上线程又存在切换的问题,所以时间耗得多.想要解决这个问题,是开几个进程, ...

  8. file 文件的操作

    1.写入文件: (1)第一种方式    f = open("filename",'mode')  #先打开一个文件,没有的话创建这个文件,mode是模式.有r 只读,w写,rw读写 ...

  9. Spring Cloud Netflix Eureka: 多网卡环境下Eureka服务注册IP选择问题

    https://blog.csdn.net/neosmith/article/details/53126924 通过源码可以看出,该工具类会获取所有网卡,依次进行遍历,取ip地址合理.索引值最小且不在 ...

  10. Spring_xml和注解混合方式开发

    1. spring核心配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&q ...