此片记录在指定 div 中动态添加 div

  • html():
  • append(): 在被选元素的结尾（但仍在元素内部）插入指定的内容。 
    语法: $(selector).append(content);  //其中，参数content是必需的，指定要附加的内容。
    
append 能够使用函数给被选元素附加内容，语法为：
    
$(selector).append(function(index,html)); //function()是必需的，参数index和html都是可选的。index表示接收选择器的index位置，html表示接收选择器的当前html。
    //示例： 在所选元素之后追加
    <html>
    
<head>
    
<script type="text/javascript" src="/jquery/jquery.js"></script>
    
</head>
    
<body>
    
    <p>This is a paragraph.</p>
    
    <p>This is another paragraph.</p>
    
    <button>在每个 p 元素的结尾添加内容</button>
    
    <script type="text/javascript">
    
        $(document).ready(function(){
    
          $("button").click(function(){
    
            $("p").append(" <b>Hello jQuery!</b>");
    
          });
    
        });
    
    </script>
    
</body>
    
</html>

    运行结果如下：

    This is a paragraph. Hello jQuery!
    This is another paragraph. Hello jQuery!

  • appendTo(): 在被选元素的结尾（但仍在元素的内部）插入指定的内容。但不能使用函数来附加内容。 
    语法：$(content).appendto(selector); //参数content是必需的，指定要附加的内容。
    //示例：
    
<html>
    
<head>
    
<script type="text/javascript" src="/jquery/jquery.js"></script> 

</head>
    
<body>
    
    <p>This is a paragraph.</p>
    
    <p>This is another paragraph.</p>
    
    <button>在每个 p 元素的结尾添加内容</button>
    
    <script type="text/javascript">
    
        $(document).ready(function(){
    
          $("button").click(function(){
    
                $("<b> Hello jQuery!</b>").appendTo("p");
    
          });
    
        });
    
    </script>
    
</body>
    
</html>
    
运行结果如下：

This is a paragraph. Hello jQuery!
    
This is another paragraph. Hello jQuery!

  • 在指定DIV下的第二个P后面增加元素

    <div id="divId">
    
    <p class="c1">我是第1个</p>
    
    <p class="c2">我是第2个</p>
    
    <p class="c3">我是第3个</p>
    
    <p class="c4">我是第4个</p>
    
</div>

<script type="text/javascript">
    
    var insertHtml='<div>我是插入的元素。</div>'
    
    $('#divId').find('p').eq().after(insertHtml);
    
</script>
总结： 动态追加、删除 div

. 最好每个div（or其他元素）都有一个识别标志，例如 id;  //eg: <input id='inputPropertyName" + filterNum + "' value='MetricName' />  //动态的filterNum-不一样的id
2. 一般 div 增，删，改，查 功能尽量全部满足； 
. 代码精简--传参，给值的尽量写成统一函数，使用时传参即可；

jquery 实践操作：div 动态嵌套(追加) div的更多相关文章

  1. jquery 实践操作：div 动态嵌套页面

    此篇记录如何在指定 div 中嵌套一个页面 load() 方法: 1. 使用 $.load() 直接导入一个页面 $('#addPage_div').load("temp/handle.ht ...

  2. jquery 实践操作：iframe 相关操作

    此篇记录关于HTML 的 iframe 元素 的相关记录 定义:iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 常用的基本 iframe 设置(详细设置属性参考API:http:/ ...

  3. jquery 实践操作：attr()方法

    此篇要记录的是 关于 jquery  的 attr() 方法 在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中 ...

  4. jquery 实践操作：load()方法

    最近决定总结下实际项目中的 JS 相关的一些操作,因此开启此系列,记录使用过程中用到的一些实用操作问题和解决方法,给自己一份记录. jquery load方法是对jQuery.ajax()进行封装以方 ...

  5. 大div中嵌套小div，点击大div时隐藏，点击小div不隐藏

    给小div添加一个click事件 <div onClick="event.cancelBubble = true">  //小div

  6. Div中嵌套一个div，怎么是里面的div居中？

    盒子居中是在写样式中经常遇到的问题,在这里说个我经常使用的方法~ 利用绝对定位:

  7. div中嵌套div速度将会同样很慢

    ---恢复内容开始--- div中嵌套了div速度将会同样很慢   最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...

  8. jquery动态创建元素 div元素随垂直滚动条位置变化置顶显示

    刚打开页面效果 拖动滑动条之后效果 页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  9. Jquery hover鼠标经过时弹出div动态提示语

    一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...

随机推荐

  1. java打包打包

    http://blog.sina.com.cn/s/blog_6b9dcc870101k8xq.html 上面说的最后一种方法,不太对. 下面这个可以 Try the fat-jar extensio ...

  2. 抽象类&接口区别

    抽象类:1.可以有构造方法.   2.可以有抽象方法也可以有具体方法. 3.权限修饰符可以是private.默认.protected.public. 4.可以定义成员变量.   5.interface ...

  3. 转:maven国内镜像（maven下载慢的解决方法）

    http://www.cnblogs.com/xiongxx/p/6057558.html https://jingyan.baidu.com/article/1876c8524ee0d0890a13 ...

  4. 4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍

    4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍 天涯明月笙 关注 2018.02.20 19:23* 字数 762 阅读 135 ...

  5. win10下安装mysql-5.7.23-winx64

    Step1 官方下载地址 https://dev.mysql.com/downloads/mysql/ 选择手动下载版本 解压到自己指定的路径 上图中的my.ini及data文件夹在压缩包里是没有的, ...

  6. 初识redis-cluster

    安装redis [root@localhost ~]# cd /datas/soft/ [root@localhost soft]# ll redis-.tar.gz // 已经下载的最新版 -rwx ...

  7. 15.VUE学习之-表单中使用key唯一令牌解决表单值混乱问题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. spark和MR比较

    MapReduce: 分布式的计算框架 缺点:执行速度慢 IO瓶颈 ==> 磁盘IO 网络IO shuffle机制:数据需要输出到磁盘,而且每次shuffle都需要进行排序操作 框架的机制: 只 ...

  9. 数学算法：CF534A-Exam(思维)

    Exam time limit per test 1 second memory limit per test 256 megabytes input standard input output st ...

  10. 江西理工大学编程俱乐部 2328 Star

    : Star 时间限制: C/C++ s Java/Python s 内存限制: MB 答案正确: 提交: 题目描述 31世纪,人类世界的科技已经发展到了空前的高度,星际移民,星际旅游早已经不再是问题 ...