1、append()方法：向每个匹配的元素内部添加元素

appendTo()方法：将所有匹配的元素追加的指定的元素中

<html>

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

     <title>jquery选择器</title>

</head>

<body>

    <ul>

        <li>苹果</li>

        <li>香蕉</li>

        <li>橘子</li>

        <li>梨</li>

     </ul>

</body>

<script type="text/javascript">

    var $li1=$("<li>柚子</li>");

    $("ul").append($li1);
    var $li2=$("<li>哈密瓜</li>");

    $li2.appendTo("ul");
</script> </html>

2、prepend()方法：向所有匹配的元素前面添加新的元素

prependTo()方法：将元素添加到指定元素的前面

<html>

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

     <title>jquery选择器</title>

</head>

<body>

    <ul>

        <li>苹果</li>

        <li>香蕉</li>

        <li>橘子</li>

        <li>梨</li>

     </ul>

</body>

<script type="text/javascript">

    var $p=$("<p>请选择你喜欢的水果</p>");

    $("ul").prepend($p);

    $p.prependTo("ul");

</script>

</html>

3、after()：在每个匹配的元素之后添加元素

insertAfter()：将元素插入到指定元素的后面

<html>

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

     <title>jquery选择器</title>

</head>

<body>

    <p>请选择你喜欢的水果</p>

    <ul>

        <li>苹果</li>

        <li>香蕉</li>

        <li>橘子</li>

        <li>梨</li>

     </ul>

</body>

<script type="text/javascript">

    var $b=$("<b>您的选择是</b>");

    $("p").after($b);

    $b.insertAfter("p");

</script>

</html>

4、before() 在匹配的元素之前添加元素，效果同prepend()

insertBefore() 将元素添加到指定元素之前，效果同prependTo()

jquery动态添加DOM节点的更多相关文章

  1. jQuery动态创建DOM节点

    var SKU=$("#SKU"); // 通过ID查找到指定表格 var oTable=SKU[0]; // 获取第一个表格 // 获取正文tbody元素 var tBodies ...

  2. vue，在模块中动态添加dom节点，并监听

    在这里,onclick事件没有作用,因为它指向的是window,如果写为this.click页面显示为undefined, 我采用的是通过class绑定事件,但是会有一个问题,那就是当你渲染多个事件时 ...

  3. console.time 简单分析javascript动态加入Dom节点的性能

    Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改 ...

  4. jQuery修炼心得-DOM节点的插入

    1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是 ...

  5. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  6. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

  7. jquery 动态添加的代码不能触发绑定事件

    今天发现jQuery对动态添加的元素不触发事件,比如blur.click事件等 参考文章证明了我的结论,并给出了原因及解决方案 原因:程序找不到动态添加的节点. 解决方案:在绑定父元素后的子元素 $( ...

  8. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  9. JQuery动态添加控件并取值

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. android控制之 adb shell (已完成，不定期增加内容)

    第一步:首先,下载adb1.0.32.zip,里面有如下图的内容: 第二步:解压缩,复制Adb.exe,和fastboot.exe到System32,注意AdbWinUsbApi.dll,AdbWin ...

  2. [转载]opencv +linux

    转载 ubuntu12.04安装openCV2.4.2(2012-08-08 16:54:06 参考http://www.samontab.com/web/2012/06/installing-ope ...

  3. clearInterval()与setInterval()的应用

    1.setInterval()按照一定的周期调用函数2.clearInterval()取消setInterval()的周期调用 例如:图片轮播中的clearInterval()与setInterval ...

  4. JS+css滑动菜单简单实现

    JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错 ...

  5. Python学习笔记捌——面向对象高级编程

    __slots__特殊变量的使用: 由于Python是动态语言,允许先编写类,然后在创建实例的时候添加属性或者方法:而__slots__特殊变量就是,限制往类里添加属性的: 在创建类的时候,使用__s ...

  6. C语言--位运算符

    一.位运算符 1.按位与:& 1> 功能 * 只有对应的两个二进制位为1时,结果位才为1,否则为0 * 举例:10用二进制表示为1010,  7用二进制表示为0111.对两个数值进行&a ...

  7. AFNetworking了解

    AFNetworking了解   AFNetworking是一个讨人喜欢的网络库,适用于iOS以及Mac OS X. 它构建于在NSURLConnection, NSOperation, 以及其他熟悉 ...

  8. EF 一对一，一对多，多对多 Flunt API 配置

       一对一 就拿后台用户权限相关的实体来说明吧,用户表,用户详细表,是一对一的关系: /// <summary> /// 用户信息类 /// </summary> publi ...

  9. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  10. Mysql数据库乱码与编码问题筛查

    最近接连遇到数据库编码问题,让你的系统本来像个美丽的姑娘却忽然发现她不识字一样难受,其实很多时候是编码的问题,而mysql(特别地)设计编码的地方很多,在这里做一个筛查: 1 mysql编码 用下面的 ...