Javascript 克隆div并遍历到其中的内容

我有一个div，里面有一个输入，我想用不同的id在点击时克隆这个div，我想里面输入的id也改变，我想限制克隆的数量

var div=document.getElementById（'clonedDiv'），
clone=div.cloneNode（真）；
clone.id=“some_id”；
document.body.appendChild（克隆）

克隆这个div



克隆我
既然您在问题中标记了jQuery，我们可以使用它来大大简化事情

将单击事件处理程序绑定到克隆按钮，我们可以使用它调用一个方法，例如
clone（）
，该方法将处理克隆的所有逻辑
定义一个全局变量，例如
cloneCount
，该变量存储已创建的克隆数，以便生成唯一的ID
克隆目标
元素
修改目标元素及其子元素中的所有ID（使用
.add（）
创建超集），只需添加
cloneCount
将克隆的元素追加到DOM
如果要限制克隆数，只需在方法中跟踪
cloneCount
。当超过某个阈值时，返回退出该函数

以下是一个概念验证示例：


var$div=$（'#clonedDiv'）；
变量cloneCount=0，
maxCloneCount=5；
var clone=function（）{
//如果克隆了最大次数，请停止执行
如果（克隆计数>=最大克隆计数）
返回；
//构建克隆
var$clone=$div.clone（）；
//替换（克隆及其子项的）所有ID以确保其唯一性
$clone.add（$clone.children（））.attr（'id'，function（））{
返回此.id+'\'+cloneCount；
});
//附加到DOM
$（'body'）。追加（$clone）；
cloneCount++；
};
$（'button'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
克隆（）；
});

克隆这个div



克隆me
要获得预期结果，请使用以下选项

var div = document.getElementById('clonedDiv');
var count = 0;
$('button').on('click',function(){
  if(count <= 3){
    $('#clonedDiv').clone().attr('id','cloneDiv'+count).appendTo('body');
  }

count++;


})

var div=document.getElementById（'clonedDiv'）；
var计数=0；
$（'button'）。在（'click'，function（）上{
如果（count我想为您的问题提供一个原生的JS解决方案。它非常简单，适用于所有现代浏览器


outerHTML
是IE4+，请参阅
insertAdjacentHTML
是IE4+，请参阅


const
sourceDiv=document.getElementById（'clonedDiv'），
cloneTrigger=document.getElementById（'make-clone'），
最大克隆数=3；
让
克隆数=0；
函数makeClone（）{
//确保没有创建太多克隆。
if（克隆创建===maxClones）{
log（“达到最大克隆数”）；
返回；
}
让
//outerHTML与innerHTML类似，但包含元素本身。
clone=sourceDiv.outerHTML；
//将两个ID替换为唯一ID
clone=clone.replace（'clonedDiv'，'clonedDiv_${clones}`）；
clone=clone.replace（'clonedInput'，'clonedInput{clones}'）；
//insertAdjacentHTML类似于innerHTML，只是您可以知道它应该相对于元素插入到哪里。
//在这种情况下，将克隆添加到button元素之前。
cloneTrigger.insertAdjacentHTML（'beforebeagin'，clone）；
//增加创建的克隆数。
Clones++；
}
cloneTrigger.addEventListener（'click'，makeClone）；

克隆这个div



克隆我



克隆我
//代码在这里
window.onload=init；
函数init（）{
const observable=Rx.observable.fromEvent（$（'clonebtn'），'click'）；
可观察
.take（4）
.地图（1）
.扫描（（acc，curr）=>acc+curr）
.subscribe（i=>$（“#文件”）.before（getFileTemplate（i））；
}
函数getFileTemplate（i）{
返回`
克隆此div${i}

`;
}