添加新内容的四个 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. ElasticSearch 2 (9) - 在ElasticSearch之下(图解搜索的故事)

    ElasticSearch 2 (9) - 在ElasticSearch之下(图解搜索的故事) 摘要 先自上而下,后自底向上的介绍ElasticSearch的底层工作原理,试图回答以下问题: 为什么我 ...

  2. Lambda 表达式有何用处?如何使用?

    强烈推荐!!!   作者:Sevenvidia链接:https://www.zhihu.com/question/20125256/answer/324121308来源:知乎著作权归作者所有.商业转载 ...

  3. java ee wildfly spring 在线程池的线程中注入

    public class RtmpSpyingTests extends AbstractTransactionalJUnit4SpringContextTests { @Autowired Thre ...

  4. [AC自动机][学习笔记]

    用途 AC自动机适用于一类用多个子串在模板串中匹配的字符串问题. 也就是说先给出一个模板串,然后给出一些子串.要求有多少个子串在这个模板串中出现过. KMP与trie树 其实AC自动机就是KMP与tr ...

  5. 在views中引用UserProfile报错RuntimeError: Model class apps.users.models.UserProfile doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS.

    如图报错,在settings中,该加的也加了啊! 显然类似于网上最容易遇到的解决方案如下图,是没有任何意义的 只要在view中有 from .models import UserProfile,Ver ...

  6. quartz 每天0点5分开始,以后每隔15分钟启动一次,23:50停止

    quartz 每天0点5分开始,以后每隔15分钟启动一次,23:50停止,这个表达式怎么写? 5 用quartz做定时器,要求达到这样的效果每天0点5分开始,以后每隔15分钟启动一次,23:50停止不 ...

  7. TestNg 12. extentReport测试报告

    直接上代码:以下是我的目录结构,首先新建一个包名字叫 com.tester.extent.demo,直接新建两个类就可以,名字叫  ExtentTestNGIReporterListener  和 T ...

  8. please select android sdk

  9. 基本类型(2):oracle中有4个大对象(lobs)类型可用,分别是blob,clob,bfile,nclob。

    1)blob:二进制lob,为二进制数据,最长可达4GB,存贮在数据库中. 2)clob:字符lob,字符数据,最长可以达到4GB,存贮在数据库中. 3)bfile:二进制文件;存贮在数据库之外的只读 ...

  10. 关于SSM的小感悟

    这周用SSM框架写了个小项目,真是各种百度啊,最后总算是实现了个登陆功能.刚才一直在修改,想实现登陆进去可以对id进行搜索,出现搜索的整体数据,无奈,一直没能实现.所以就只能留到下周了,到时候会把这个 ...