jQuery克隆html元素并改变id

使用DIV克隆简化前端数据更新

最新推荐文章于 2022-07-01 16:40:56 发布

denghe4720

最新推荐文章于 2022-07-01 16:40:56 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/zeussbook/p/9991711.html

本文介绍了一种利用DIV克隆的方式简化前端数据更新的过程。通过克隆已有的DOM元素并修改其属性值来实现HTML内容的快速更新，避免了手动拼接HTML字符串的繁琐步骤。

如题，前端操作经常需要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);
});

转载于:https://www.cnblogs.com/zeussbook/p/9991711.html