jquery 实践操作:div 动态嵌套(追加) div
2024-08-28 06:53:16
此片记录在指定 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 增,删,改,查 功能尽量全部满足;
. 代码精简--传参,给值的尽量写成统一函数,使用时传参即可;
最新文章
- Vue - class与style绑定
- Struts2中使用OGNL
- PHP如何批量生成手机号-使用PHP 如何生成一组不重复的手机号码?
- unity, readOnly varible
- nginx 配置虚拟主机
- JadClipse eclipse反编译插件
- 步步学LINQ to SQL:将类映射到数据库表【转】
- datatable赋值行
- linux 下把Caps_Lock 映射成Ctrl
- new sun.misc.BASE64Encoder()报错找不到jar包
- A - 棋盘问题 POJ - 1321
- BZOJ_3872_[Poi2014]Ant colony_dfs
- C#采用vony.Html.AIO插件批量爬MM网站图片
- docker学习------docker私有仓库的搭建
- ambari 安装HDP3.0.1后,启动服务的问题记录
- 基于jQuery+HTML5加入购物车代码
- create-react-app快速搭建react-app
- ABP框架服务层的接口与实现(增删改查)
- 学习mysql replication gitd
- iOS10 打开APP设置界面和WIFI界面
热门文章
- 解决ndk编译lua时遇到 undefined reference to &#39;__srget&#39;的问题
- select函数实例代码
- hibernate系列之一
- html5支持drag的拖放排序插件sortable.js
- JavaScript对象创建的九种方式
- 23.VUE学习之-列表的排序sort
- 数据结构-单链表(Linked List)
- 数据分析处理库Pandas——索引
- makefile学习(1)
- Kubespray部署Kubernetes 1.13.0(使用本地镜像仓库)