如题,前端操作经常需要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. Codeforces Round #545 (Div. 2) D

    链接:http://codeforces.com/contest/1138/problem/D 啊啊啊啊啊啊,自闭啊,比赛的时候判断条件 if(s1[i-1]=='0') aa++;写成了 if(s1 ...

  2. 使用 dmidecode 查看Linux服务器信息

    使用 dmidecode 查看Linux服务器信息 来源  http://www.laozuo.org/6682.html 对于大部分普通服务器用户来说,我们选择VPS.服务器产品的时候比较关心的是产 ...

  3. Mysql 函数大全- 5.6 中文解释函数参考

    mysql 函数大全 5.6 函数参考 5.6函数参考    (只翻译部分,细节查看相关英文版) 12.1功能和操作员参考 12.2表达式评估中的类型转换 12.3运营商 12.4控制流功能 12.5 ...

  4. [bzoj2288][pojChallenge]生日礼物【贪心+堆+链表】

    题目描述 ftiasch 18岁生日的时候,lqp18_31给她看了一个神奇的序列 A1, A2, -, AN. 她被允许选择不超过 M 个连续的部分作为自己的生日礼物. 自然地,ftiasch想要知 ...

  5. asp.net处理事件

    从来不用也从来不研究这事件.但为了写那种CGI式的接口不得已研究一下. 环境  W10 VS2017 测试方法:写一个实现IHttpModule接口的类,在Init方法中加载所有事件然后打出日志,看看 ...

  6. [2017-7-28]Android Learning Day6

    常用控件 Spinner DatePickerDialog TimePickerDiaog RadioButton CheckBox spinner(下拉菜单) <Spinner android ...

  7. SP8791 DYNALCA - Dynamic LCA 解题报告

    SP8791 DYNALCA - Dynamic LCA 有一个森林最初由 \(n (1 \le n \le 100000)\) 个互不相连的点构成 你需要处理以下操作: link A B:添加从顶点 ...

  8. [HNOI2015]落忆枫音 解题报告

    [HNOI2015]落忆枫音 设每个点入度是\(d_i\),如果不加边,答案是 \[ \prod_{i=2}^nd_i \] 意思是我们给每个点选一个父亲 然后我们加了一条边,最后如果还这么统计,那么 ...

  9. Nginx log日志切割shell

    #!/bin/bash#此脚本用于自动分割Nginx的日志,包括access.log和error.log#每天00:00执行此脚本 将前一天的access.log重命名为access-xxxx-xx- ...

  10. NOIP 飞扬的小鸟 题解

    题目描述 Flappy Bird是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便宣 ...