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() 筛 ...
 
随机推荐
- 洛谷P3258 松鼠的新家
			
树上差分 这应该是一道很简单的树上差分了..就是问每个点被覆盖了多少次. 要注意我们最后dfs后,要把除第一个节点以外的所有点的-1,因为有些点作为起点和终点覆盖了两次,按照题目意思是不用覆盖两次的. ...
 - C#中 const 和 readonly 的区别
			
C#中 const 和 readonly 的区别 来源 https://www.cnblogs.com/gsk99/archive/2008/10/10/1308299.html http://dev ...
 - python中lambda的使用
			
为什么我们需要lambda? 既然有了def可以用来定义函数,我们为什么还需要lambda来定义.根据我的使用情况我认为lambda的优点在于: 非常适合用来构造只使用一次的函数,可以是匿名函数 有利 ...
 - 【LOJ#6073】距离(主席树)
			
[LOJ#6073]距离(主席树) 题面 LOJ 题解 两点间的距离是\(dep[x]+dep[y]-2dep[LCA]\). 那么题目要求的东西拆开维护,唯一不好做的就是\(2dep[LCA]\). ...
 - centos7搭建ELK Cluster集群日志分析平台(二):Logstash
			
续 centos7搭建ELK Cluster集群日志分析平台(一) 已经安装完Elasticsearch 5.4 集群. 安装Logstash步骤 . 安装Java 8 官方说明:需要安装Java ...
 - 纪中2018暑假培训day3提高a组改题记录(混有部分b组)
			
day3 模拟赛,看了看a组题,发现是博弈论,非常开心(因为好玩),于是做的a组.结果差点爆零,死命纠结t1的sg函数,但其实只是一个dp,不用扯到sg函数的那种. t1: Description 被 ...
 - A1133. Splitting A Linked List
			
Given a singly linked list, you are supposed to rearrange its elements so that all the negative valu ...
 - Django 获取访问者信息
			
request内的META里有请求用户的信息 #定义视图方法 def get_ip(request): #打印头部所以信息 # print(request.META) # 获取ip信息 if &quo ...
 - [LNOI2014]LCA(树链剖分+线段树)
			
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3626 题解:看到LCA,我们可以直接想到这题的正解不是LCA!(LCA只能得20分,还要 ...
 - 第二十二篇-Guideline基准线
			
效果图: 前5个是button填充的,最后一个是线性布局下放置一个button在填充. layout.xml <?xml version="1.0" encoding=&qu ...