此片记录在指定 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. 巧妙使用JQuery Clone 添加多行数据，并更新到数据库

    WEB代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="BatchAdd. ...

  2. java实现微信扫一扫详解

    java实现微信扫一扫详解 一.微信JS-SDK参数配置及查找 JS安全域名配置(查找:微信公众号里-公众号设置-功能设置页) 注:1.安全域名外网必须可以访问的到  2.域名不能有下划线  3.要将 ...

  3. Oracle下如何收集 Systemstate dump

    2: dump (不包括lock element) 10: dump 11: dump + global cache of RAC 256: short stack (函数堆栈) 258: 256+2 ...

  4. oc字典放入到数组里，根据字典里的属性排序（重点）

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...

  5. axios常见传参方式

    1:get请求 一般发送请求是这么写 axios.get('/user?id=12345&name=user') .then(function (res) { console.log(res) ...

  6. 一、Shell 教程

    Shell 教程 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了一个 ...

  7. 安装并配置多实例Mysql数据库

    1.安装Mysql需要的依赖包 yum -y install ncurses-devel libaio-devel cmake 2.创建Mysql用户账号 useradd -s /sbin/nolog ...

  8. vue插件库

    各种vue插件,各种有,总有一款适合你! github地址:https://github.com/opendigg/awesome-github-vue

  9. Scrapy-redis分布式爬虫爬取豆瓣电影详情页

    平时爬虫一般都使用Scrapy框架,通常都是在一台机器上跑,爬取速度也不能达到预期效果,数据量小,而且很容易就会被封禁IP或者账号,这时候可以使用代理IP或者登录方式爬,然而代理IP很多时候都很鸡肋, ...

  10. C++ vector 实例

    #include <string> #include <iostream> #include <vector> #include <algorithm> ...