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

时间:2022-12-30 14:08:29

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

  (1) append()方法:

    $("#test").append("<p>测试</p>");  //在id为test元素内部末尾插入<p>测试</p>

  (2) appendTo()方法:

    $("<p>测试</p>").appendTo("#test");   //在id为test元素内部末尾插入<p>测试</p>

2. insertBefore & before & insertAfter & after

  (1) insertBefore() & before() 方法 :在被选元素前(元素外部)插入指定内容

    $("<p>测试</p>").insertBefore("#test"); //在id为test的元素前插入<p>测试</p>

    注:如果指定内容是已存在的元素,它将从它的当前位置被移除,并被插入在被选元素之前。

    $("#test").before("<p>测试</p>"); //在id为test的元素前插入<p>测试</p>

  (2) insertAfter() & after()方法:在被选元素后(元素外部)插入指定内容

     $("<p>测试</p>").insertAfter("#test"); //在id为test的元素后插入<p>测试</p>

    注:如果指定内容是已存在的元素,它将从它的当前位置被移除,并被插入在被选元素之后。

    $("#test").after("<p>测试</p>"); //在id为test的元素后插入<p>测试</p>

3.html() 方法:设置或返回被选元素的内容

  (1) 设置被选元素的内容

    $("#test").html("<p>测试</p>"); //将id为test的元素里的内容设置为<p>测试</p>,若元素里面原本有内容,则将原来的内容替换

  (2) 返回被选元素的内容

    $("p").html(); //返回匹配到的第一个P元素的内容

    

jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等)的更多相关文章

  1. jquery追加元素的几种方法(append&lpar;&rpar;、prepend&lpar;&rpar;、after&lpar;&rpar;、before&lpar;&rpar;、insertAfter&lpar;&rpar;、insertBefore&lpar;&rpar;)

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

  2. jquery 追加元素&sol;jquery文档处理&comma;插入、修改、移动、删除指定的DOM元素&period;

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

  3. js中常用追加元素的几种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

  5. jquery数组删除指定元素的方法&colon;grep&lpar;&rpar;

    jquery数组删除指定元素的方法:grep() 金刚 数组 jquery javascript 元素 遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样 ...

  6. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  7. 转:jquery 父、子页面之间页面元素的获取,方法的调用

    一.jQuery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...

  8. jquery动态添加的元素不能直接应用事件方法的时候

    对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click.因为这些元素属于动态生成,除非采用 onclick ...

  9. Jquery取得iframe中元素的几种方法(转载)

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...

随机推荐

  1. Parallel并行化编程

    在很多场景中我们需要通过并行化的方式来提高程序运行的速度,比较典型的需求就是并行下载.前期遇到一个需求是要批量下载瓦片,每次大概下载上百万个瓦片,要想提高瓦片的下载速度,只能通过并行化的方式,下面把我 ...

  2. 【SAP Business Objects】Universe中的&commat;prompt语法

    @Prompt 函数的语法: @Prompt('message','type',[lov],Mono|Multi,free|constrained|primary_key,persistent|not ...

  3. minicom的安装与配置

    分类: LINUX     如果项目中使用的bootloader为 u-boot,那么在用minicom向目标板传送kernel时 会发生一些错误.故若您使用的是u-boot,建议您使用kermit, ...

  4. HDP2&period;4安装&lpar;一&rpar;:Centos7安装

    在进入大数据领域来,一直使用微软的Azure HDInsight,当前在中国区仅支持在Windows系统上部署集群,虽然创建的过程很简单,但对于开发人员来说,就是一个黑盒子,在更深入的研究和开发扩展的 ...

  5. Jquery zTree结合Asp&period;net实现异步加载数据

    zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...

  6. MySQL的基本

    MySQL的基本语法 left JOIN 左表匹配右表 有没有内容全部匹配 SELECT Persons.LastName, Orders.OrderNo FROM Persons INNER JOI ...

  7. 全球移动互联网大会gmic 2017为什么值得参加?

    长城会CEO郝义认为,"科学产业化将会推动科学复兴,"而本次GMIC 北京 2017也将首次引入了高规格科学家闭门峰会,专门设置G-Summit全球科学创新峰会,以"科学 ...

  8. 第一个spring简单的helloworld

    spring 是一个开源的框架 也是轻量级框架 1.导入jar包 spring的版本 4.0 目录: spring-framework-4.0.0.RELEASE-libs 下的jar  spring ...

  9. AX&lowbar;CreateAndPostPurch

    static void CreateAndPostPurch(Args _args) { List il = new List(Types::Record); DocumentNum Document ...

  10. Day12--Python--生成器&comma;生成器函数&comma;推导式&comma;生成器表达式

    一.昨日内容回顾 惰性机制(只有执行__next__()才会取值)二.今日主要内容 1.生成器 生成器:本质是迭代器,写法和迭代器不一样.用法和迭代器一样. ※生成器记录的是代码 2.生成器函数 生成 ...