jquery 实践操作：div 动态嵌套(追加) div
此片记录在指定 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的更多相关文章
- jquery 实践操作：div 动态嵌套页面
此篇记录如何在指定 div 中嵌套一个页面 load() 方法: 1. 使用 $.load() 直接导入一个页面 $('#addPage_div').load("temp/handle.ht ...
- jquery 实践操作：iframe 相关操作
此篇记录关于HTML 的 iframe 元素 的相关记录 定义:iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 常用的基本 iframe 设置(详细设置属性参考API:http:/ ...
- jquery 实践操作：attr()方法
此篇要记录的是 关于 jquery 的 attr() 方法 在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中 ...
- jquery 实践操作：load()方法
最近决定总结下实际项目中的 JS 相关的一些操作,因此开启此系列,记录使用过程中用到的一些实用操作问题和解决方法,给自己一份记录. jquery load方法是对jQuery.ajax()进行封装以方 ...
- 大div中嵌套小div，点击大div时隐藏，点击小div不隐藏
给小div添加一个click事件 <div onClick="event.cancelBubble = true"> //小div
- Div中嵌套一个div，怎么是里面的div居中？
盒子居中是在写样式中经常遇到的问题,在这里说个我经常使用的方法~ 利用绝对定位:
- div中嵌套div速度将会同样很慢
---恢复内容开始--- div中嵌套了div速度将会同样很慢 最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...
- jquery动态创建元素 div元素随垂直滚动条位置变化置顶显示
刚打开页面效果 拖动滑动条之后效果 页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- Jquery hover鼠标经过时弹出div动态提示语
一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...
随机推荐
- 《javascript 学习笔记》
注释 1. // This is an in-line comment. 2. /* This is a multi-line comment */ 七种data types(数据类型) undef ...
- MySQL 5.7 在线启用和关闭GTID
1.相关基础 MySQL 5.7.6之后GTID_MODE提供了两个新的选项分别为ON_PERMISSIVE和OFF_PERMISSIVEOFF_PERMISSIVE:不产生GTID事务, Slave ...
- SpingBoot之多Profile文件
1.我们在主配置文件编写的时候,文件名可以是 application-{profile}.properties/yml默认使用application.properties的配置: 在我们的项目开发.测 ...
- Java 对数组的筛选
在Java里面 一般对一个数组进行筛选,去剔除一些元素,一般做法是用临时数组来存储,把符合条件的元素加入到新数组中,虽然数组有移除的方法但是 是线程不安全的: 而用迭代器Iterator,可以在遍历的 ...
- Java - 通过私有构造方法获取实例
- django+xadmin在线教育平台（四）
3-2 配置表单页面 必要的该说的,该了解的 前置条件: 你已经学习了前面教程.将项目的文件夹目录结构,setting配置等修改完毕与我保持一致. 本节通过Django快速的配置一个留言板页面来学习 ...
- js时间转换
1. 将时间戳转换成日期格式 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己拼接起来就好了 ...
- Vue-Router基础学习笔记
1.安装vue-router npm install vue-router yarn add vue-router 2.引入注册vue-router import Vue from 'vue' imp ...
- Redis实现之事件
事件 Redis服务器是一个事件驱动程序,服务器需要处理以下两类事情: 文件事件(file event):Redis服务器通过套接字与客户端(或者其他Redis服务器)进行连接,而文件事件就是服务器对 ...
- TCP/IP网络编程之多种I/O函数
send和recv函数 在之前的学习中,我们在不少示例中用到send和recv这两个函数,但一直没有详细解释过着两个函数中每个参数的含义.本节将介绍Linux平台下的send&recv函数 # ...