javascript:它会在第一次点击时不断复制它复制的内容

Question

我正在制作一个脚本，它将复制整个 div 并将其添加到主 div。

代码如下:

脚本:

var a = 0;
function add(name) {
    if (a <= 10) {
        a++;
        var parent = name.parentNode;
        var content = parent.querySelector("div");
        var objTo = document.getElementById(content.id);
        var str = document.getElementById(parent.id).innerHTML;
        str = str.replace(/_1/gi,  '_' + a);
        var divtest = document.createElement("div");
        divtest.setAttribute("id", a);
        divtest.innerHTML = str + a;
        objTo.appendChild(divtest);
    }
}      

html:

<div id="main">
<button onclick="add(this);return false;">show it</button>
<div id="content">
<input name="n_1" type="text" size="1">
<input name="f_1" type="text" size="1">
<input name="l_1" type="text" size="1">
<input name="m_1" type="text" size="1">
<input name="a_1" type="text" size="1">
</div>
</div>

当您运行代码时，它可以正常工作，但主要问题是它不断重复，按钮也被重复。

输出:

1st OUTPUT:

+
test
+
test1

2nd OUTPUT:

+
test
+
test1
+
test
+
test1
test2

预期输出:

1st OUTPUT:

<input name="n_1" type="text" size="1">
<input name="f_1" type="text" size="1">
<input name="l_1" type="text" size="1">
<input name="m_1" type="text" size="1">
<input name="a_1" type="text" size="1">
<input name="n_2" type="text" size="1">
<input name="f_2" type="text" size="1">
<input name="l_2" type="text" size="1">
<input name="m_2" type="text" size="1">
<input name="a_2" type="text" size="1">
test1

2nd OUTPUT:

<input name="n_1" type="text" size="1">
<input name="f_1" type="text" size="1">
<input name="l_1" type="text" size="1">
<input name="m_1" type="text" size="1">
<input name="a_1" type="text" size="1">
<input name="n_2" type="text" size="1">
<input name="f_2" type="text" size="1">
<input name="l_2" type="text" size="1">
<input name="m_2" type="text" size="1">
<input name="a_2" type="text" size="1">
<input name="n_3" type="text" size="1">
<input name="f_3" type="text" size="1">
<input name="l_3" type="text" size="1">
<input name="m_3" type="text" size="1">
<input name="a_3" type="text" size="1">
test1
test2

Answer 1

它复制按钮，因为这是您告诉它要做的:

var str = document.getElementById(parent.id).innerHTML;

这会获取按钮父级的 HTML，其中当然会包含按钮本身。

如果只想复制“content”的内容，追加到“main”，那就是

var a = 0;

function add(name) {
  if (a <= 10) {
    a++;
    var parent = name.parentNode;
    var content = parent.querySelector("div");
    var str = content.innerHTML;
    str = str.replace(/_1/gi, '_' + a);
    var divtest = document.createElement("div");
    divtest.setAttribute("id", a);
    divtest.innerHTML = str + a;
    parent.appendChild(divtest);
  }
}

<div id="main">
<button onclick="add(this); return false;">+</button>
<div id="content">
test 
</div>
</div>