此片记录在指定 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从键盘输入学生成绩，找出最高分，并输出学生成绩等级。

    /*从键盘输入学生成绩,找出最高分,并输出学生成绩等级:成绩 >=最高分-10 等级为A成绩 >=最高分-20 等级为B成绩 >=最高分-30 等级为C其余为 等级为D 提示:先输入 ...

  2. I am too vegetable to all kill the 51nod problems on level 2 and 3.

    51nod level 2:50/51 剩的一个题是切比雪夫距离转曼哈顿距离,现学的,bzoj3710过了,51nod上全wa了,很迷,可能有坑⑧. level 3:62/68 之前有的题有思路但是不 ...

  3. java抓取12306火车余票信息

    最近在弄一个微信的公众帐号,涉及到火车票查询,之前用的网上找到的一个接口,但只能查到火车时刻表,12306又没有提供专门的查票的接口.今天突然想起自己直接去12306上查询,抓取查询返回的数据包,这样 ...

  4. 二十八、MySQL 元数据

    MySQL 元数据 你可能想知道MySQL以下三种信息: 查询结果信息: SELECT, UPDATE 或 DELETE语句影响的记录数. 数据库和数据表的信息: 包含了数据库及数据表的结构信息. M ...

  5. Linux问题分析或解决_samba无法连接

    1. windows设置方面问题 问题:window能连接部分服务器的samba共享,一部分无法连接.报错如截图. 解决:前提---其他人连接都没有问题,发现有问题的连接服务器的电脑是win10,而w ...

  6. 【JAVA】cxf使用springboot与xml配置的差别所导致的问题。

    使用xml时使用以下配置使报文没有加上命名空间时也能正常访问接口.bean定义的前后顺序不影响程序正常注册对象. <!-- 通过Spring创建数据绑定的类 --> <bean id ...

  7. Laravel — homestead 配置多站点

    一.homestead.yaml 配置 homestead.yaml 文件配置sites,如下 sites: - map: homestead.test to: /home/vagrant/Code/ ...

  8. 基于django的个人博客网站建立（三）

    基于django的个人博客网站建立(三) 前言 网站效果可点击这里访问 今天主要完成的是文章在页面的显示以及评论,留言 具体内容 首先我希望主页面是显示我的所有文章,于是在主页面的视图函数中返回了所有 ...

  9. GoF23种设计模式之创建型模式之单态模式

    1概述 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 2适用性 1.当类只能有一个实例而且客户可以从一个总所周知的访问点访问它的时候. 2.当这个唯一实例应该是通过子类化可扩展的,并且客户应 ...

  10. 20181225 基于TCP/IP和基于UDP/IP的套接字编程

    一.TCP/IP的套接字编程 服务器端代码: import  socket​server = socket.socket() # 默认是基于TCP# 基于TCP的对象serve=socket.sock ...