如题,前端操作经常需要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 media 配置

    Django  media 配置 settings.py 配置  配置 media 的路径, 以及连接到主路径 还要添加一个 上下文管理 TEMPLATES = [ { 'BACKEND': 'dja ...

  2. wstngfw IKEv2服务器配置示例

    wstngfw IKEv2服务器配置示例 移动客户端的服务器配置有几个组件: 为***创建一个证书结构 配置IPsec移动客户端设置 为客户端连接创建阶段1和阶段2 添加IPsec防火墙规则 创建** ...

  3. 阿里云.log

    申请证书审核失败的原因及处理方法;( 新添加站点 免费版 SSL 网页内不能有 HTTPS的连接:更多点击连接)

  4. MT【257】任意存在并存

    函数$f(x)=\dfrac{4x}{x+1}(x>0),g(x)=\dfrac{1}{2}(|x-a|-|x-b|),(a<b)$, 若对任意$x_1>0$,存在$x_2\le x ...

  5. 51NOD1174 区间最大数 && RMQ问题(ST算法)

    RMQ问题(区间最值问题Range Minimum/Maximum Query) ST算法 RMQ(Range Minimum/Maximum Query),即区间最值查询,是指这样一个问题:对于长度 ...

  6. Ocean的游戏(前缀和)

    题目链接:http://oj.ismdeep.com/contest/Problem?id=1284&pid=1 B: Ocean的游戏 Time Limit: 1 s      Memory ...

  7. OpenLayers学习笔记(四)— QML显示html中openlayers地图的坐标

    GitHub:八至 作者:狐狸家的鱼 本文链接:实现QML中显示html中地图的坐标 如何QML与HTML通信已经在这篇文章 QML与HTML通信之画图 详细讲述了 1.HTML var coord; ...

  8. Python使用import导入相对路径的其他py文件

    假如有如下的目录结构 . ├── setup.py ├── main.py ├── mod/ │   └── mod.py └── sub/ └── sub.py 情况1:setup.py导入main ...

  9. Neovim中提示Error: Required vim compiled with +python

    Neovim在编辑python文件时出现错误提示,如下图 原因 出现该错误的原因说明未安装Python2/3的支持 解决方法 使用包管理器安装Neovim的Python支持python-neovim ...

  10. 洛谷P3195 玩具装箱

    P3195 [HNOI2008]玩具装箱TOY 第一道斜率优化题. 首先一个基本的状态转移方程是 要使f[i]最小,即b最小. 对于每个j,可以表示为一个点. 然后我们取固定斜率时截距最小的即可,高中 ...