jQuery克隆html元素并改变id
如题,前端操作经常需要ajax异步刷新html页面数据。有时候js里面拼接html代码很麻烦。
因此选择一个div克隆并改变一些值就省了很多事。这个div也可以提前写在html里面hide()
下面是js代码:这个被克隆元素为了不影响表单的提交,最好放在form外面。
//追加节点,增加图片信息
var index=1000;
$(document).on('click','#addPicture',function(){
index+=1;
var strVar=$("#addDivNode").clone(true); //克隆元素,注意不是javascript的cloneNode()
strVar.attr("id","addDiv"+index); //改变克隆元素id,注意不是setAttribute()
var lable=strVar.find("#dinfoadd"); //根据id查找子元素
var file=strVar.find("#0");
var img=strVar.find("#img_0");
lable.attr("id","dinfoadd"+index); //改变克隆子元素节点一
file.attr("id",index); //改变克隆元素子节点二
img.attr("id","img_"+index); //改变克隆子元素节点三
$("#addDiv"+index).style="display: block";
$("#addDiv").before(strVar);
});
jQuery克隆html元素并改变id的更多相关文章
- jQuery中的基本选择器,id,class,元素,通用
常用的基本选择器: 后续的补充选择器 为了后面看的方便,我们先将body中的内容展示出来: <body> <p> 账号:<input type="text&qu ...
- 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- jQuery基本选择 元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jquery如何判断元素是否被点击、属性操作、class操作
1.通过点击事件发生后,改变标志位的值,记录点击状态 function(){ var isClick = false; $('#test').click(function(){isClick = tr ...
- jQuery判断当前元素显示状态并控制元素的显示与隐藏
1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible'); //true为显示,false为隐藏 $("#id") ...
- JavaScript 、jQuery动态创建元素的关键字~
JavaScript动态创建元素: 1.创建元素 如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...
- jquery学习笔记----元素筛选
1.eq() 筛选指定索引号的元素2.first() 筛选出第一个匹配的元素3.last() 筛选出最后一个匹配的元素4.hasClass() 检查匹配的元素是否含有指定的类5.filter() 筛 ...
随机推荐
- ☆ [NOIp2016] 天天爱跑步 「树上差分」
题目类型:LCA+思维 传送门:>Here< 题意:给出一棵树,有\(M\)个人在这棵树上跑步.每个人都从自己的起点\(s[i]\)跑到终点\(t[i]\),跑过一条边的时间为1秒.现在每 ...
- 【AGC005F】Many Easy Problems FFT 容斥原理
题目大意 给你一棵树,有\(n\)个点.还给你了一个整数\(k\). 设\(S\)为树上某些点的集合,定义\(f(S)\)为最小的包含\(S\)的联通子图的大小. \(n\)个点选\(k\)个点一共有 ...
- P2521 [HAOI2011]防线修建
题目链接:P2521 [HAOI2011]防线修建 题意:给定点集 每次有两种操作: 1. 删除一个点 (除开(0, 0), (n, 0), 与指定首都(x, y)) 2. 询问上凸包长度 至于为什么 ...
- 【BZOJ5285】[HNOI2018]寻宝游戏(神仙题)
[BZOJ5285][HNOI2018]寻宝游戏(神仙题) 题面 BZOJ 洛谷 题解 既然是二进制按位的运算,显然按位考虑. 发现这样一个关系,如果是\(or\)的话,只要\(or\ 1\),那么无 ...
- HNOI2019 退役记
窗外风雨大作. 凌晨两点又被噩梦惊醒,朦胧中看见书桌的灯还亮着. 走近书桌,有一个人正在敲打着键盘,屏幕上是一些似曾相识的东西. 被水浸湿的头发随意地搭在额头上,鼻梁上架着一副眼镜,镜片上全是小水珠, ...
- LVS-Keepalived高可用集群(NAT)
LEA-6-LVS-NAT+Keepalived高可用集群-------client-----------------主LVS-----------------从LVS---------------- ...
- python 逻辑运算符问题
1 正确 if('A' not in self.storageDevice.softVersion or\ 'B' not in self.storageDevice.softVersion or\ ...
- 洛谷 P3121 【[USACO15FEB]审查(黄金)Censoring (Gold)】
被自己学校OJ的毒瘤测评姬卡到自闭 Hash+栈+优化暴力 其实思路也很简单,就是把单词存进一个结构体,记录其哈希值和长度,然后就可以开始匹配了 但是,理论复杂度很高,为\(O(n*length)\) ...
- 【165223&165218】结对感想——论如何与队友完美配合
★ 为什么要结对编程? 一.结对编程的优势 搭档的形式 平等.互补 高效率.共分享 相互影响.督促学习 方便复审与反馈 二.结对编程的方式 互换的角色 相同的目的 结对编程中有两个角色: (a)驾驶员 ...
- 回调函数: 一定要在函数名前加上 CALLBACK,否则有可能引起内存崩溃!
今天又遇到一个莫名其妙的内存崩溃问题,问题代码 EnumChildWindows(...): EnumChildWindows(hwnd_panel_text_watermark, (WNDENUMP ...