添加新内容的四个 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. [luogu1486][郁闷的出纳员]

    题目链接 思路 这个题其实就是对于treap中的删除操作进行一些修改.自己yy了一种做法.就是在删除的时候,如果要删除的数比这棵子树的根大,那么就把根变成根的右孩子,这样就相当于删除了整棵左子树和根节 ...

  2. java ssl 使用不同的加密套件,对性能影响很大

    一直以来都是使用java默认的[加密套件]来处理ssl请求,突然有一天我尝试显式的设置了一组加密套件后,发现图片显示的速度明显快了一倍左右. 经过使用几组不同的加密套件测试后,发现使用 TLS_ECD ...

  3. semantic ui框架学习笔记三

    网格系统 基本网格 <div class="ui grid"> <div class="column"></div> < ...

  4. lucene的普通搜索(二)

    首先得到索引: package com.wp.util; import java.io.File; import java.io.FileReader; import java.nio.file.Pa ...

  5. qml: 自定义输入框

    import QtQuick 2.7 Rectangle { width:; height:; border.width:; border.color: "#E7E7E7" rad ...

  6. day07-(JDBC)

    回顾: sql sql分类: DDL: 对象:数据库和表 关键词:create alter drop truncate 创建数据库:create database day06; 删除数据库: drop ...

  7. pt-archiver数据导入迁移工具

    pt-archiver数据导入迁移工具 一直想明白,如何将一个大表的数据,每多少行数据已提交,分批次的转储到另外的地方,幸好有现成的工具,赶紧把实验成功的操作记录下来. 原理就不解释了,直接上最常用的 ...

  8. BZOJ4698 差分 + 二分 + SA

    https://www.lydsy.com/JudgeOnline/problem.php?id=4698 题意:求N个字符串中最长的相同字串的长度,相同的定义是:两个子串长度相同且一个串的全部元素加 ...

  9. Openldap命令详解

    Openldap 客户端常用管理命令 1.ldapadd -x: 简答认证方式 -W: 不需要在命令上写密码 ldapapp -x -D "cn=Manager,dc=suixingpay, ...

  10. python js(JavaScript)初识

    ####################总结############## 引入: 可以在body标签中放入<script type=”text/javascript”></scrip ...