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

Question

我正在使用JavaScript通过单击一个按钮来克隆一行表单。并且每次添加一行时，新行的标签值都会改变。我的意思是主标签是"dependent 2“，而在新的一行中，它变成了"dependent 3”，.I不知道如何改变标签。在这里你可以看到我的代码。克隆正在工作，但未更改标签：

​

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

除了拼写错误(标签/标签)之外，您似乎过度复杂化了标签文本的更新(为什么是循环？)。这可以很简单地完成：

​

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>

​