此片记录在指定 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. arr.forEach()与for...in的用法举例

    1.forEach() 将给定的数字转换成罗马数字. 所有返回的 罗马数字 都应该是大写形式. function convert(num) { var str = ""; var ...

  2. Java 窗体的基本操作语句 JFrame

    package com.swift; import java.awt.Color; import java.awt.GridLayout; import java.util.Random; impor ...

  3. mysql 存储过程 例子

    DROP PROCEDURE IF EXISTS variable_demo; delimiter // CREATE PROCEDURE variable_demo() BEGIN select ' ...

  4. mysql 绿色版 安装

    1.下载mysql的绿色版压缩包.(自行百度) 2.自行规划目录解压 3.安装 注意:我遇到的两种版本的安装方法(暂时按照解压后的目录中是否含有data目录来区分) 3.1 无data目录(我用到的的 ...

  5. 数据结构-二分查找(Binary Search)

    #include <stdio.h> #include <string.h> #include <stdlib.h> #define LIST_INIT_SIZE ...

  6. Ubuntu12.04下YouCompleteMe安装教程（部分）

    1.通过源码编译安装VIM 开发中使用的是Ubuntu 12.04 LTS,通过sudo apt-get install vim安装的版本较低,不支持YCM,所以,用源码编译并安装最新的Vim. 卸载 ...

  7. 将Web项目War包部署到Tomcat服务器基本步骤（完整版）

    1. 常识:   1.1 War包 War包一般是在进行Web开发时,通常是一个网站Project下的所有源码的集合,里面包含前台HTML/CSS/JS的代码,也包含Java的代码. 当开发人员在自己 ...

  8. linux 服务器被植入ddgs、qW3xT.2挖矿病毒处理记录

    被入侵后的现象: 发现有qW3xT.2与ddgs两个异常进程,消耗了较高的cpu,kill掉后 过一会就会重新出现. kill 掉这两个异常进程后,过一段时间看到了如下进程: 首先在/etc/sysc ...

  9. CSAPP 缓冲区溢出试验

    缓冲区溢出试验是CSAPP课后试验之一,目的是: 更好的理解什么是缓冲区溢出 如何攻击带有缓冲区溢出漏洞的程序 如何编写出更加安全的代码 了解并理解编译器和操作系统为了让程序更加安全而提供的几种特性 ...

  10. HDU：2594-Simpsons’ Hidden Talents

    Simpsons' Hidden Talents Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...