Javascript For循环在1处停止，不计算添加到DOM的元素

我试图使添加的每个子输入都具有与父输入相同的事件侦听器

代码段（）：

var main=document.getElementById（“main”）.getElementsByTagName（“a”）；
var按钮=document.createElement（'input'）；
//在#main中的标记上循环
对于（变量i=0；i

输入
+

不要尝试复制事件处理程序，而是使用附加到

#main

的单个委托事件处理程序：

var main=document.getElementById（“main”）；
main.addEventListener（“单击”，函数（e）{
//如果目标错误，委托事件处理程序将提前返回
如果（！e.target.matches（“.btn”））返回；
//克隆parentElement.input\u容器
var node=e.target.parentElement；
var clone=node.cloneNode（true）；
//附加到主目录
这个.appendChild（克隆）；
});

输入
+
不要尝试复制事件处理程序，而是使用附加到
#main
的单个委托事件处理程序：


var main=document.getElementById（“main”）；
main.addEventListener（“单击”，函数（e）{
//如果目标错误，委托事件处理程序将提前返回
如果（！e.target.matches（“.btn”））返回；
//克隆parentElement.input\u容器
var node=e.target.parentElement；
var clone=node.cloneNode（true）；
//附加到主目录
这个.appendChild（克隆）；
});

输入
+
cloneNode方法不复制事件侦听器

克隆节点会复制其所有属性及其值，包括内部（内嵌）侦听器。它不会复制使用addEventListener（）添加的事件侦听器或分配给元素属性的事件侦听器（例如node.onclick=fn）

cloneNode方法不复制事件侦听器

克隆节点会复制其所有属性及其值，包括内部（内嵌）侦听器。它不会复制使用addEventListener（）添加的事件侦听器或分配给元素属性的事件侦听器（例如node.onclick=fn）

您没有在
for
循环中向DOM添加任何
a
元素，因此当它与
#main
中运行时存在的元素（只有一个）一起完成时，它会停止

您可能希望在
main
上使用事件委派：您处理
main
上的单击，但只有当单击通过
a.btn
时，才对其执行操作；见评论：


//获取元素，而不是其中的'a'元素
var main=document.getElementById（“main”）
//听它的点击声
main.addEventListener（“单击”，函数（e）{
//如果此单击通过了#main（此``中的` a.btn`）。。。
var btn=e.target.closest（“a.btn”）；
if（btn&&this.contains（btn））{
//克隆btn的parentElement，附加到#main
var node=btn.parentElement；
var clone=node.cloneNode（true）；
main.appendChild（克隆）；
}
});

输入
+
您没有在
for
循环中向DOM添加任何
a
元素，因此在运行
#main
中的元素（只有一个）时，它会停止运行

您可能希望在
main
上使用事件委派：您处理
main
上的单击，但只有当单击通过
a.btn
时，才对其执行操作；见评论：


//获取元素，而不是其中的'a'元素
var main=document.getElementById（“main”）
//听它的点击声
main.addEventListener（“单击”，函数（e）{
//如果此单击通过了#main（此``中的` a.btn`）。。。
var btn=e.target.closest（“a.btn”）；
if（btn&&this.contains（btn））{
//克隆btn的parentElement，附加到#main
var node=btn.parentElement；
var clone=node.cloneNode（true）；
main.appendChild（克隆）；
}
});

输入
+
我不认为这一定是实现这一目标的最佳方式，但要坚持您的总体战略：


让cloneSelf=函数（e）{
var parent=e.target.parentElement；
var clone=parent.cloneNode（true）；
//事件侦听器不是用“cloneNode”克隆的，因此我们必须手动进行克隆。
clone.getElementsByTagName（“a”）[0].addEventListener（“单击”，cloneSelf）；
document.getElementById（'main'）.appendChild（克隆）；
}
//获取第一个链接，并添加事件侦听器
var firstLink=document.getElementById（“main”）.getElementsByTagName（“a”）[0]；
firstLink.addEventListener（“单击”，cloneSelf）

输入
+
我不认为这一定是实现这一目标的最佳方式，但要坚持您的总体战略：


让cloneSelf=函数（e）{
var parent=e.target.parentElement；
var clone=parent.cloneNode（true）；
//事件侦听器不是用“cloneNode”克隆的，因此我们必须手动进行克隆。
clone.getElementsByTagName（“a”）[0].addEventListener（“单击”，cloneSelf）；
document.getElementById（'main'）.appendChild（克隆）；
}
//获取第一个链接，并添加事件侦听器
var firstLink=document.getElementById（“main”）.getElementsByTagName（“a”）[0]；
firstLink.addEventListener（“单击”，cloneSelf）

输入
+
对于可运行的示例，请使用堆栈片段，而不是场外链接。堆栈代码段是
[]
工具栏按钮。（我已经为您做了一个。）请将堆栈片段用于可运行的示例，而不是场外链接。堆栈片段是
[]