问题

项目中越来越多的地方需要实现无刷新来更新页面局部内容,使用ajax从后台获取数据然后追加到页面中。那么怎么获取数据之后如何实现元素的追加呢?

解决

jQuery提供追加元素函数,掌握常用的四种追加函数,可以灵活地追加页面元素。

  1. 内部追加

追加到结尾

append() 方法在被选元素的结尾(在内部)插入指定内容。

语法:

$(selector).append(content)

示例:
在每个 p 元素结尾插入内容

$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
追加到开头

prepend()方法在被选元素的开头(仍位于内部)插入指定内容。

语法:

$(selector).prepend(content)

示例:
在 p 元素的开头插入内容:

$(".btn1").click(function(){
$("p").prepend("<b>Hello world!</b>");
});
  1. 外部追加

追加到结尾 

after() 方法在被选元素后插入指定的内容。

语法:

$(selector).after(content)

示例:
在每个 p 元素后插入内容:

$("button").click(function(){
$("p").after("<p>Hello world!</p>");
});

追加到开头 

before() 方法在被选元素前插入指定的内容。

语法:

$(selector).before(content)

示例:
在每个 p 元素前插入内容:

$("button").click(function(){
$("p").before("<p>Hello world!</p>");
});

jquery追加元素的不同语法的更多相关文章

  1. jquery 追加元素/jquery文档处理,插入、修改、移动、删除指定的DOM元素.

    jquery 追加元素 $("#content").append("..."); // 添加到元素内部最后面 $("#content").p ...

  2. jquery追加元素的几种方法(append()、prepend()、after()、before()、insertAfter()、insertBefore())

    最近项目不是很忙,抽空整理了下,js中常用追加元素的几种方法. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  3. jQuery 追加元素的方法如append、prepend、before,after(转)

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 复制代码代码如下: $("p").append("Some ...

  4. jQuery 追加元素的方法如append、prepend、before

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 复制代码代码如下: $("p").append("Some ...

  5. jquery 追加元素的方法

    append() 方法在被选元素的结尾插入内容. 在里面 prepend() 方法在被选元素的开头插入内容. 在里面 after() 方法在被选元素之后插入内容. 在外面before() 方法在被选元 ...

  6. jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等)

    1. append & appendTo 的功能均为:在被选元素结尾(仍在元素内部)插入指定内容,但是内容和选择器的位置不同 (1) append()方法: $("#test&quo ...

  7. jquery 追加元素的方法(append prepend after before 的区别)

    append() 方法在被选元素的结尾插入内容. prepend() 方法在被选元素的开头插入内容. after() 方法在被选元素之后插入内容. before() 方法在被选元素之前插入内容. &l ...

  8. jquery追加元素,移除DOM,jqueryDOM操作

    1.append() 方法在被选元素的结尾插入内容. 2.prepend() 方法在被选元素的开头插入内容. 3.after() 方法在被选元素之后插入内容. 4.before() 方法在被选元素之前 ...

  9. Javascript及Jquery获取元素节点以及添加和删除操作

    用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...

随机推荐

  1. python---网络之邮件发送

    在发送邮件之前需要先设置邮件开启了SMTP等功能,对于163还需要获取授权码 这里设置保存修改 这里获取授权码 完整封装发送邮件类 import smtplib from email.mime.tex ...

  2. C和C++的区别和联系

    关于C和C++的区别是面试中经常会被问到的问题,本着即将面试的心态,进行知识整理,并对小知识点进行扩展: C/C++的联系: C++是C的超集,兼容大部分C的语法的结构: 联系嘛我只能想到这个,毕竟c ...

  3. CM记录-Hbase启用安全认证控制

    1.cm-cluster2-HBase-2-HBase 安全授权(hbase.security.authorization)-simple改为true 2.添加配置 1)超级用户-加入root.hba ...

  4. mybatis在控制台打印sql语句

    1:mybatis-config.xml中配置: <?xml version="1.0" encoding="UTF-8"?> <!DOCTY ...

  5. JavaScript遍历对象中所有元素

    操作对象如下,属性名不确定: 遍历方法: var temp = new Array(); for(var i in result.datas[0]){ temp.push(result.datas[0 ...

  6. Hibernate_day01

    一.今天内容介绍 1 web内容回顾 (1)javaee三层结构 (2)mvc思想 2 hibernate概述 3 hibernate入门案例 4 hibernate配置文件 5 hibernate的 ...

  7. 20155204 2016-2017-2 《Java程序设计》第6周学习总结

    20155204 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 一切皆对象,输入输出也是类,线程也是 String对象的trim方法去掉首尾空格和空字符 f ...

  8. elasticsearch 单机多实例

    elasticsearch 配置单机器多实例 host: - - path data: /opt/elasticsearch/data/node1 /opt/elasticsearch/data/no ...

  9. Sqoop入门

    1 下载地址         http://archive.cloudera.com/cdh5/cdh/5/         版本 sqoop-1.4.6-cdh5.7.0         安装包   ...

  10. uboot 如何向内核传递参数

    a.uboot 向内核传递的参数有两种类型 1.一个是bootargs 2.一个是环境参数, 而环境参数的设置靠的是 Y:\junda\JdLinuxApp\A1801_uboot\source\u- ...