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. ashx ajax 与 自定义javascript函数

    1.getUserPower为自定义javascript函数 获取权限  (1).ashx 处理程序的相对地址(必须是相对地址)  (2).au 权限名称  (3).classname 类名  (4) ...

  2. ZJOI 最小割 CQOI 不同的最小割 (最小割分治)

    题目1 ZJOI 最小割 题目大意: 求一个无向带权图两点间的最小割,询问小于等于c的点对有多少. 算法讨论: 最小割 分治 代码: #include <cstdlib> #include ...

  3. js获取IP地址的方法小结

    s代码获取IP地址的三种方法,在js中取得客户端的IP地址. 原文地址:http://www.jbxue.com/article/11338.html 1,js取得IP地址的方法一 <scrip ...

  4. Android原理View、ViewGroup

    Android的UI界面都是由View和ViewGroup及其派生类组合而成的.其中,View是所有UI组件的基类,而ViewGroup是容纳这些组件的容器,其本身也是从View派生出来的.Andro ...

  5. jstat

    http://hi.baidu.com/savagert/item/6a056619d25bb6426926bb38

  6. 一颗 45nm CPU的制造过程

    沙子 :硅是地壳内第二丰富的元素,而脱氧后的沙子(尤其是石英)最多包含25%的硅元素,以二氧化硅(SiO2)的形式存在,这也是半导体制造产业的基础. 硅熔炼: 12英寸/300毫米晶圆级,下同.通过多 ...

  7. 再造轮子之网易彩票-第二季(IOS 篇 by sixleaves)

    02-彩票项目第二季 2.封装SWPTabBar方式一 接着我们思考如何进行封装.前面已经将过了为什么要封装, 和封装达到的效果.这里我们主要有两种封装方式,分别是站在不同的角度上看待问题.虽然角度不 ...

  8. python学习之路-2 初识python数据类型

    数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取值范围为-2** ...

  9. 计算直线的交点数(set + 打表)

    计算直线的交点数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  10. .NET 中使用 HttpWebResponse 时 Cookie 的读取

    今天把一个网站登录配置到以前写的蜘蛛程序中,发现不能成功登录.检查后才发现,那个网站在登录成功后,输出了一个特殊路径的 Cookie,由于是使用 HttpWebRequest.Cookies 来获取的 ...