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. Homebrew -- Mac软件管家（套件管理yun……）

    也许是之前使用linux系统的时候总是习惯使用wget 在mac中只有curl,有点略显不习惯 于是乎某天在搜索mac开发者的时候发现了Homebrew这个东西 ok,是那么句话--惰性是人的天性 有 ...

  2. 脚本化HTTP

    1.HTTP: 定义:超文本传输协议 (HTTP-Hypertext transfer protocol) 是一种详细规定了浏览器和万维网服务器之间互相通信的规则,通过因特网传送万维网文档的数据传送协 ...

  3. Java Se 基础系列(笔记) -- BasicDataType

    java.lang.String类代表不可变的字符序列 String类常用方法:1.public char charAt(int index); -- 返回下标为index的字符 2.public i ...

  4. C#界面设计疑问2:panel摆放问题

    1.问题1是这样的,网友意思让使用一个按键对应显示一个panel 即,http://zhidao.baidu.com/question/1924974374730559427.html 2.那么我在设 ...

  5. Introduction to the POM

    原文:https://maven.apache.org/guides/introduction/introduction-to-the-pom.html Introduction to the POM ...

  6. MyEclipse java was started but returned exit code=-1

    java was started but returned exit code=-1 Vm指的是java虚拟机,默认你安装MyEclipse时会自带一个java虚拟机,Vm配置那一行换成你安装的jav ...

  7. dedecms likearticle 调用附加表的字段调用方式

    [field:id runphp='yes'] $aid = @me; $row = $GLOBALS['dsql']->GetOne("Select 字段名 From `dede_a ...

  8. thinkPHP中省市级联下拉列表

    公共函数放置位置common文件夹下common.php文件(此段代码也可放置在要使用的控制器中) 封装的下拉列表函数代码: /** * 根据列表拼装成一个下拉列表 ADD BY CK * @para ...

  9. 小试牛刀——爬topit.me的图片，附github简易上传教程

    接触了scrapy ,发现爬虫效率高了许多,借鉴大神们的文章,做了一个爬虫练练手: 我的环境是:Ubuntu14.04 + python 2.7 + scrapy 0.24 目标 topit.me 一 ...

  10. R语言画正弦曲线

    正弦曲线一个周期是2π,我们要先生成x的取值范围. 可以用seq函数生成一个等差序列,步进为0.01 x=seq( 0,  2*pi,  0.01 )   pi表示π y=sin(x) plot(x, ...