如题,前端操作经常需要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的更多相关文章

  1. jQuery中的基本选择器,id,class,元素,通用

    常用的基本选择器: 后续的补充选择器 为了后面看的方便,我们先将body中的内容展示出来: <body> <p> 账号:<input type="text&qu ...

  2. 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  3. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  4. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  5. jQuery基本选择 元素

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  6. jquery如何判断元素是否被点击、属性操作、class操作

    1.通过点击事件发生后,改变标志位的值,记录点击状态 function(){ var isClick = false; $('#test').click(function(){isClick = tr ...

  7. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

  8. JavaScript 、jQuery动态创建元素的关键字~

    JavaScript动态创建元素: 1.创建元素  如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...

  9. jquery学习笔记----元素筛选

    1.eq()  筛选指定索引号的元素2.first() 筛选出第一个匹配的元素3.last() 筛选出最后一个匹配的元素4.hasClass() 检查匹配的元素是否含有指定的类5.filter() 筛 ...

随机推荐

  1. Codeforces997D Cycles in product 【FFT】【树形DP】

    题目大意: 给两个树,求环的个数. 题目分析: 出题人摆错题号系列. 通过画图很容易就能想到把新图拆在两个树上,在树上游走成环. 考虑DP状态F,G,T.F表示最终答案,T表示儿子不考虑父亲,G表示父 ...

  2. 「POJ3311」Hie with the Pie

    题目链接 >http://poj.org/problem?id=3311< 题意:从0出发,经过所有点(点可以重复走)后回到0点,问最短路 思路分析: 这题和普通的最短路不太一样,因为题目 ...

  3. thymeleaf中的判断总结

    判断String字符串,添加引号 th:class="${flag=='forum.html'}?'active'" 判断boolean类型,注意不能当成字符串处理,不能添加引号 ...

  4. 「HDU6158」 The Designer(圆的反演)

    题目链接多校8-1009 HDU - 6158 The Designer 题意 T(<=1200)组,如图在半径R1.R2相内切的圆的差集位置依次绘制1,2,3,到n号圆,求面积之和(n< ...

  5. 【CF1139D】Steps to One(动态规划)

    [CF1139D]Steps to One(动态规划) 题面 CF 你有一个数组,每次随机加入一个\([1,n]\)的数,当所有数\(gcd\)为\(1\)时停止,求数组长度的期望. 题解 设\(f[ ...

  6. MYSQL主从复制制作配置方案

    1. 主从复制机器配置 操作系统:centos7 x64 基于vagrant下的virtual box的虚拟机两台 master ip:192.168.21.11, slave ip 192.168. ...

  7. Git多个SSH KEYS解决方案(含windows自动化、TortoiseGit、SourceTree等)

    工作过程中,经常会使用到多个git仓库,每个git仓库对应一个账号,可以理解为每个git仓库对应一个ssh key,因此我们需要管理多个ssh key.   一.快速创建ssh key   1. 创建 ...

  8. js 字符与ASCII码互转

    将字符转为ASCII码 var str = "A"; str.charCodeAt(); var str1 = 'a'; str1.charCodeAt(); 将ASCII码转为字 ...

  9. 洛谷P4307 球队收益

    题意:有n个球队,m场比赛. 每个球队都已经有些胜负场次了. 每个球队的收益为Ci * wini2 - Di * losei2. 求最小可能总收益. 解: 先看出一个模型:用一流量代表一个胜场,每场比 ...

  10. C# http请求带请求头部分

    直接上代码 前台调用: <script type="text/javascript"> function zLoginCheck() { var Account = ' ...