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弹出层消失. 下 ...
随机推荐
- Jquery点击数字切换图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- C#继承机制 多级继承
一些面向对象语言允许一个类从多个基类中继承,而另一些面向对象语言只允许从一个类继承,但可以随意从几个接口或纯抽象类中继承. 只有C++支持多级继承,许多程序员对此褒贬不一.多级继承常会引起继承来的类之 ...
- Oracle数据库学习(二)
2.用SQL进行多表查询 (1)无条件多表查询 笛卡尔集:总记录数=table1记录数×table2记录数 select * from table1, table2 (2)等值连接 内连接:selec ...
- 2018.11.5 Nescafe26 T1 小猫爬山
题目 题目描述 Freda 和 rainbow 饲养了 N 只小猫,这天,小猫们要去爬山.经历了千辛万苦,小猫们 终于爬上了山顶,但是疲倦的它们再也不想徒步走下山了(呜咕>_<). Fre ...
- ElasticSearch High Level REST API【5】使用模板搜索
ElasticSearch Rest高级API 提供了多种搜索方式,除了前面讲到的search查询,ElasticSearch 还提供了通过模板搜索查询.我个人比较喜欢这种方式. 我们可以通过脚本预选 ...
- C语言中strtod()函数的用法详解
函数原型: #include <stdlib.h> double strtod(const char *nptr, char **endptr); C语言及C++中的重要函数. 名称含义 ...
- SQL调优--记一次表统计信息未及时更新导致查询超级慢
某日同事丢给我一个看上去复杂的查询(实际就涉及两张表,套来套去)说只是换了日期条件,但一个查询5秒出数据,一个根本查不出来.现在整理下解决过程,及涉及的知识点. 若有不正之处, ...
- IOS开发学习笔记009-OC基本知识
开始学习OC,时间不等人啊,要抓紧了. OC基本知识 新建一个以.m结尾的文件,这既是oc的程序文件.在oc程序中完全兼容C语言.编译好链接类似. oc包含头文件是使用#import <> ...
- Windows核心编程小结2
这一节看看内存管理相关的信息 首先看看虚拟内存 虚拟地址空间 32位系统 --- 4GB = 232 64 位系统 ---- 16EB = 264 虚拟内存表 当一个应用程序从硬盘加载到RAM时, ...
- Java 语言概述与开发环境(1)
目录: 一.计算机语言的发展史 二.Java语言的简述 三.Java的特点 四.java语言的运行环境及环境变量的配置 五.Dos的常见命令 六.第一个java程序-HelloWord ...