我想在JavaScript的克隆方法中改变标签值

Question

我使用JavaScript通过单击按钮克隆一行表单。每次添加一行时，新行的标签值都会发生变化。我的意思是主标签是"依赖的"在新的一行中，它变成了"依赖"。我不知道如何更改标签。在这里你可以看到我的代码。克隆正在工作，但没有更改标签:

function myFunction() {
var elem = document.querySelector('#dependent');
var clone = elem.cloneNode(true);
clone.id = "dependent2";
elem.after(clone);
var param = document.getElementsByTagName("lable");
var id = new Array();
for (i = 2; i < 7; i++) {
id[i] = param.item(i);
lable[i].innerHTML = "dependent" + i + 1;
}
}

<form class="needs-validation" invalidate>
<div class="form-row">
<label class="col-4 offset-2 col-form-label">Dependent 1</label>
<div class="form-group col-4">
<div class="input-group mx-auto" style="border-radius: 3px;width:100%;">
<input type="number" class="form-control " id="validationDefault01" style="font-size:15px" placeholder="Age" required>
</div>
</div>
</div>
<div class="form-row" id="dependent">
<label class="col-4 offset-2 col-form-label">Dependent 2</label>
<div class="form-group col-4">
<div class="input-group mx-auto" style="border-radius: 3px;width:100%;">
<input type="number" class="form-control " id="validationDefault01" style="font-size:15px" placeholder="Age" required>
</div>
</div>
</div>
<button class="quebtn1 mx-auto" type="button" style="width: 150px;border-radius:8px;" onClick="myFunction()">Add Dependents</button>

Answer 1

除了打印错误(lable/label)之外，您似乎使标签文本的更新过于复杂(为什么要循环?)这可以简单地做到:

let nextLabel = 3;
function myFunction() {
var elem = document.querySelector('#dependent');
var clone = elem.cloneNode(true);
clone.id = "dependent"+nextLabel;
elem.parentElement.insertBefore(clone,elem.parentElement.children[elem.parentElement.length-1]);
var label = clone.querySelector("label")
label.innerHTML = "Dependent " + (nextLabel++);
}

<form class="needs-validation" invalidate>
<div class="form-row">
<label class="col-4 offset-2 col-form-label">Dependent 1</label>
<div class="form-group col-4">
<div class="input-group mx-auto" style="border-radius: 3px;width:100%;">
<input type="number" class="form-control " id="validationDefault01" style="font-size:15px" placeholder="Age" required>
</div>
</div>
</div>
<div class="form-row" id="dependent">
<label class="col-4 offset-2 col-form-label">Dependent 2</label>
<div class="form-group col-4">
<div class="input-group mx-auto" style="border-radius: 3px;width:100%;">
<input type="number" class="form-control " id="validationDefault01" style="font-size:15px" placeholder="Age" required>
</div>
</div>
</div>
<button class="quebtn1 mx-auto" type="button" style="width: 150px;border-radius:8px;" onClick="myFunction()">Add Dependents</button>