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() 筛 ...
随机推荐
- 基数排序模板(基数排序,C++模板)
算法的理论学习可右转Creeper_LKF大佬的洛谷日报 一个优化算法理论时间复杂度的实例点这里 另一个实例点这里 时间复杂度\(O(n)\),算常数的话要乘位长. 蒟蒻参考了Creeper_LKF大 ...
- 利用saltstack批量安装clamav杀毒软件
源码包安装: clamav_source: file.managed: - name: /tmp/clamav-0.99.2.tar.gz - unless: test -f /tmp/clamav- ...
- luogu2282/bzoj1219 历史年份 (dp+hash+二分+线段树)
luogu1415 拆分数列的加强版 先考虑弱化版怎么做 设f[i]表示某一串数,最后一个数的右端点是i时,它的左端点的最大值(也就是说,这一串数的最后一个数尽量小) 那么有$f[j]=max\{i+ ...
- [JSOI2008]魔兽地图(树形dp)
DotR (Defense of the Robots) Allstars是一个风靡全球的魔兽地图,他的规则简单与同样流行的地图DotA (Defense of the Ancients) Allst ...
- 【linux】vim常用操作及vim插件的安装使用
vim是linux下一个非常好用的文本编辑器,在linux下开发的人员要熟练掌握vim常用命令. 1. 打开在第n行 vim +143 filename.txt 2. 只读模式打开 vim -R / ...
- layui记录
layui 官网 layui 独立版 layui mobile layui 社区
- hdu1394逆序数(线段树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1394 题目大意:逆序数:即假设在数组a中,假如i<j,但是a[i]>a[j]. 现在有一个 ...
- ONI无法启动: Uh oh! Unable to launch Neovim...
问题描述 在终端中是可以打开nvim的,ONI无法正确找到位置 解决方法 修改配置文件,指定nvim的路径 终端中输入which nvim定位所在位置,这里返回的结果是/usr/local/bin/n ...
- easyUI 两个grid表格数据左移右移代码
做项目中经常遇到选择已有数据,移动到选择好数据grid的场景,比如为项目添加员工,左侧grid是待选择员工,选好后移动到右侧grid,这里我用的jquery-easyui-1.4.2,整理出一份gri ...
- 最短路 次短路 k短路(k很小)
最短路 luogu 3371 https://www.luogu.org/problemnew/show/P3371 #include <cstdio> #include <cstd ...