如题,前端操作经常需要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. BZOJ5296 [CQOI2018] 破解D-H协议 【数学】【BSGS】

    题目分析: 裸题. 代码: #include<bits/stdc++.h> using namespace std; typedef long long ll; ; #define mp ...

  2. ☆ [NOIp2016] 天天爱跑步 「树上差分」

    题目类型:LCA+思维 传送门:>Here< 题意:给出一棵树,有\(M\)个人在这棵树上跑步.每个人都从自己的起点\(s[i]\)跑到终点\(t[i]\),跑过一条边的时间为1秒.现在每 ...

  3. 【XSY2729】欧拉子图 无向图连通性 数学

    题目大意 给你一个\(n\)个点\(m\)条边的无向图(可能有重边),对于这个图的边集的子集(一共有\(2^m\)个),如果其导出的子图的每个联通块内都存在欧拉回路,我们就把答案加上这个子图的边数的平 ...

  4. JLOI2015 DAY1 简要题解

    「JLOI2015」有意义的字符串 题意 给你 \(b, d, n\) 求 \[ [(\frac{b + \sqrt d}2)^n] \mod 7528443412579576937 \] \(0 & ...

  5. zabbix3.4.6之源码安装

    LAMP部署环境搭建: Linux+apache(httpd)+mysql(mariadb)+php: 版本要求:apache-1.3.12,mysql-5.0.3,php-5.4.0<http ...

  6. X-PACK详解

    启用和禁用启用和禁用X-Pack功能默认情况下,所有X-Pack功能都被启用.您可以启用或禁用特定的X-Pack功能elasticsearch.yml,kibana.yml以及logstash.yml ...

  7. CANOE入门(二)

    CAPL就是Communication Application Programming Laguage的缩写,CAPL类似于C语言的语法,因此所有的语法请参考C语言教程,这里不在这里进行详述,关于C语 ...

  8. Jupyter Notebook添加Ruby支持

    安装步骤 gem install iruby iruby register --force 参考资料:http://devopspy.com/linux/ruby-kernel-jupyter-not ...

  9. vue $emit 用法

    1.父组件可以用props传递给子组件. 2.子组件可以利用$emit触发父组件事件. vm.$emit('父组件方法',参数); vm.$on(event,fn); $on监听event事件后运行f ...

  10. 洛谷P1477 假面舞会

    坑死了...... 题意:给你个有向图,你需要把点分成k种,满足每条边都是分层的(从i种点连向i + 1种点,从k连向1). 要确保每种点至少有一个. 求k的最大值,最小值. n <= 1e5, ...