如题,前端操作经常需要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. Django+Xadmin打造在线教育系统(二)

    基于xadmin的后台管理 先使用pip进行安装xadmin及其依赖包 pip install django-adminx 安装完成后卸载xadmin,保留依赖包即可 pip uninstall dj ...

  2. bzoj 1029: [JSOI2007]建筑抢修 (优先队列)

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1029 思路: 按结束时间排序,优先选结束时间短的,选完后扔到优先队列里(大的优先),如果选到 ...

  3. 搭建gogs常见问题

    1.无法连接ssh,显示connection refuse. 原因是“custom/conf/app.ini”没有开启ssh功能,改为以下配置就行了  START_SSH_SERVER = true ...

  4. 【BZOJ 1701】Cow School(斜率优化/动态凸包/分治优化)

    原题题解和数据下载 Usaco2007 Jan 题意 小牛参加了n个测试,第i个测试满分是\(p_i\),它的得分是\(t_i\).老师去掉\(t_i/p_i\)最小的d个测试,将剩下的总得分/总满分 ...

  5. 使用item pipeline处理保存数据

    一个Item Pipeline 不需要继承特定基类,只需要实现某些特定方法,面向接口. class MyPipeline(object): def __init__(self): "&quo ...

  6. nio再学习之通道channel

    通道(Channel):用于在数据传输过程中,进行输入输出的通道,其与(流)Stream不一样,流是单向的,在BIO中我们分为输入流,输出流,但是在通道中其又具有读的功能也具有写的功能或者两者同时进行 ...

  7. 借助baidu的jsonp接口,做一个自己的候选词组件

    先观察 对接口进行提炼:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键词&cb=回调函数 简单测试一下: <!DOC ...

  8. Spring Boot实战

    Spring在java EE开发中是实际意义上的标准,但我们在开发Spring的时候可能会遇到以下令人头疼的问题: 1.大量配置文件的定义.2.与第三方软件整合的技术问题. Spring每个版本的退出 ...

  9. CF 1013E Hills

    这是一道DP题...我居然有那么半个小时思考非DP解决方案,实在是太弱了. 题意:给您若干山,您可以花费1代价削去1高度,求有k个山峰时的最小代价. 输出k = 1 ~ (n + 1) >> ...

  10. 若要允许 GET 请求,请将 JsonRequestBehavior 设置为 AllowGet

    http://www.cnblogs.com/Steven7Gao/archive/2012/06/13/2547905.html 若要允许 GET 请求,请将 JsonRequestBehavior ...