此片记录在指定 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. Oracle 表的连接方式

    1. 连接说明 ① Oracle一次只能连接两个表.不管查询中有多少个表,Oracle 在连接中一次仅能操作两张表. ② 当执行多个表的连接时,优化器从一个表开始,将它与另一个表连接:然后将中间结果与 ...

  2. c++ 程序设计question 001:我们的开发工具是什么？

    我们使用的开发工具是dev cpp (c plus plus),这是一个集成开发环境,我们称之为IDE(integrated development environment)

  3. ajaxfileuplod 上传文件 essyui laoding 效果,防止重复上传文件

    //放于上传前 function ajaxLoading(){ $("<div class=\"datagrid-mask\"></div>&qu ...

  4. 自动化运维工具——ansible剧本playbook（三）

    一.Playbook--Ansible剧本 playbook是由一个或多个 "play"组成的列表 play的主要功能在于将事先归并为一组的主机装扮成事先通过ansible中的ta ...

  5. Linux时区修改

    Linux修改时区的正确方法 CentOS和Ubuntu的时区文件是/etc/localtime,但是在CentOS7以后localtime以及变成了一个链接文件 [root@centos7 ~]# ...

  6. c#:无限极树形结构

    最近一直在研究树形结构菜单,无意中让我弄了出来.先上代码: 首先需要这个的一个类 public class Tree { public int id { get; set; } public stri ...

  7. wampserver怎么设置外网可访问

    wampserver配置httpd.conf允许外网访问? 在电脑上开启wamp服务后,默认是禁止外部网络访问的,如果您想要同一局域网中的设备能够访问PC上的web项目,则需要对httpd.conf文 ...

  8. JZOJ 5818. 【NOIP提高A组模拟2018.8.15】 做运动

    5818. [NOIP提高A组模拟2018.8.15] 做运动 (File IO): input:running.in output:running.out Time Limits: 2000 ms  ...

  9. 哦？原来Python 面试题是这样的，Python面试题No19

    本面试题题库,由公号:非本科程序员 整理发布 第1题:是否遇到过python的模块间循环引用的问题,如何避免它? 这是代码结构设计的问题,模块依赖和类依赖 如果老是觉得碰到循环引用可能的原因有几点: ...

  10. Django框架基础知识01-配置环境

    Django框架 Django是个怎样的东西呢? Web应用框架----Django  http服务器:用来接受用户请求,并将请求转发给web应用框架进行处理. Web应用框架处理完以后再发送给htt ...