jquery动态添加DOM节点

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节点的更多相关文章

jQuery动态创建DOM节点
var SKU=$("#SKU"); // 通过ID查找到指定表格 var oTable=SKU[0]; // 获取第一个表格 // 获取正文tbody元素 var tBodies ...
vue，在模块中动态添加dom节点，并监听
在这里,onclick事件没有作用,因为它指向的是window,如果写为this.click页面显示为undefined, 我采用的是通过class绑定事件,但是会有一个问题,那就是当你渲染多个事件时 ...
console.time 简单分析javascript动态加入Dom节点的性能
Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改 ...
jQuery修炼心得-DOM节点的插入
1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是 ...
给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经被新元素的事件绑 ...
[转载]给Jquery动态添加的元素添加事件
原文地址:给Jquery动态添加的元素添加事件作者:小飞侠我想很多人都会向我一样曾经被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...
jquery 动态添加的代码不能触发绑定事件
今天发现jQuery对动态添加的元素不触发事件,比如blur.click事件等参考文章证明了我的结论,并给出了原因及解决方案原因:程序找不到动态添加的节点. 解决方案:在绑定父元素后的子元素 $( ...
jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
JQuery动态添加控件并取值
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

js-Array
1.合并数组 var a = ["aaa", "aaaa"];var b = ["bbb", "bbbb", " ...
vector的用法总结
Reference Constructors vector Constructs a vector of a specific size or with elements of a specific ...
web api简单验证实现办法
需要使用WEBAPI,但是有验证问题没解决.后来参考网上文章做了一下DEMO 思路: 就是根据用户的账号在服务端加密一个字符串,然后返回给用户端. 具体: 一个用户编号用于唯一身份识别,密码,一个密钥 ...
小试牛刀——爬topit.me的图片，附github简易上传教程
接触了scrapy ,发现爬虫效率高了许多,借鉴大神们的文章,做了一个爬虫练练手: 我的环境是:Ubuntu14.04 + python 2.7 + scrapy 0.24 目标 topit.me 一 ...
SVN取消记住密码
百度上面找的,SVN取消记录密码的方法: 找到这个文件夹首先需要在文件夹选项里面,显示所有的文件和文件夹,不能隐藏. SVN取消记住用户名的方法打开C:\Documents and Settings ...
XML Schema <第三篇>
验证XML文档是否符合议定的XML结构有两种方法,分别是DTD模式与XML Schema.本文主要介绍XML Schema. 一.XML Schema的优点 XML Schema基于XML,没有专门的 ...
可变参数列表-Java SE5新特性(转)
Java1.5增加了新特性:可变参数:适用于参数个数不确定,类型确定的情况,java把可变参数当做数组处理.注意:可变参数必须位于最后一项.当可变参数个数多于一个时,必将有一个不是最后一项,所以只支持 ...
structs2使用小结2
回顾之前做过类似structs2的知识点总结 Structs2历史.处理流程及与1.0版本的区别 Structs2配置文件.拦截器.校验等 EL表达式在JS中使用 ${}El表达式不能直接在单独JS文 ...
使用WCF实现SOA面向服务编程—— 架构设计
原文地址:http://www.cnblogs.com/leslies2/archive/2011/03/29/1997889.html SOA本身就是一种面向企业级服务的系统架构,简单来说,SOA就 ...
spftlayer 安装及简单使用
1,yum -y install python-pip; pip(Python packet index);

jquery动态添加DOM节点

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

随机推荐

热门专题