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

  (1) append()方法:

    //在id为element元素内部末尾插入<p>拼接的元素</p>

    $("#element").append("<p>拼接的元素</p>");

  (2) appendTo()方法:

     //在id为element元素内部末尾插入<p>拼接的元素</p>

    $("<p>拼接的元素</p>").appendTo("#element");

2. insertBefore & before & insertAfter & after

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

     //在id为element的元素前插入<p>拼接的元素</p>

    $("<p>拼接的元素</p>").insertBefore("#element");

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

     //在id为element的元素前插入<p>拼接的元素</p>

    $("#element").before("<p>拼接的元素</p>");

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

    //在id为element的元素后插入<p>拼接的元素</p>

      $("<p>拼接的元素</p>").insertAfter("#element");

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

    //在id为element的元素后插入<p>拼接的元素</p>

    $("#element").after("<p>拼接的元素</p>");

jQuery拼接HTML标签元素的更多相关文章

  1. jQuery中 对标签元素操作(2)

    一.属性操作 1.获取属性和设置属性 例如下jQuery代码: var $para=$("p");           //获取<p>节点 var p_txt=$par ...

  2. jQuery中 对标签元素操作(1)

    一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上    append(): 在元素下添加元素    用法:$("id").append(" ...

  3. jQuery基础之获取和设置标签元素属性

    jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script& ...

  4. jquery 选择器(name,属性,元素)大全

    jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...

  5. jQuery中常用的元素查找方法

    $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div&q ...

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

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

  7. [jQuery]无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案

    在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢 ...

  8. jQuery选取和操纵元素的特点

    jQuery选取和操纵元素的特点 JavaScript选取元素 先来看看不用jQuery的时候我们是怎么处理元素选取的. JavaScript选取元素的时候,可以根据id获取元素,当id不存在的时候, ...

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

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

随机推荐

  1. Custom Window

    public class CustomWnd : System.Windows.Window { static CustomWnd() { DefaultStyleKeyProperty.Overri ...

  2. 好的UI管理后台

    1,https://www.v2ex.com/t/513539 - https://github.com/a54552239/projectManage

  3. C#返回JSON格式数据

    又类的属性生成json格式数据 using System; using System.Collections.Generic; using System.Linq; using System.Web; ...

  4. windows下安装配置postgreSQL

    1.下载 postgresql-10.4-1-windows-x64.exe 进行安装 2.环境配置(1)文本使用的IDE是VS2010,我们需要配置包含目录(include).库目录(lib).链接 ...

  5. Percona-Toolkit 之 pt-archiver 总结

    pt-archiver - Archive rows from a MySQL table into another table or a file. pt-archiver nibbles reco ...

  6. “QObject调用moveToThread()后 该如何释放”及QThread 的启动关闭

    1 QThread *thread = new QThread( ); 2 Task *task = new Task(); 3 task->moveToThread(thread); 4 co ...

  7. linux 系统管理11 ——系统安全及应用

    一.基本安全措施 1.系统账号清理 (1).将非登陆用户的shell设为/sbin/nologin 方法一.usermod -s 方法二.chsh命令,交互式修改 方法三.chsh -s usermo ...

  8. mysqlworkbench访问远程服务器

    1.如果服务器有防火墙,需要关一下: systemctl stop firewalld.service #停止firewallsystemctl disable firewalld.service # ...

  9. Mysql 版本号、存储引擎、索引查询

    [1]Mysql 版本号.存储引擎.索引查询 # 查看数据库版本号 SELECT VERSION(); # 查看数据库支持的引擎(默认即Support == DEFAULT行) SHOW ENGINE ...

  10. 安装percona-toolkit工具时遇到的问题

    1. 从这个链接https://www.percona.com/doc/percona-toolkit/3.0/index.html下载percona-toolkit安装包 2. 下载完成通过ftp工 ...