使用javascript克隆带有自动增量id的最后一个html元素

Question

你能否指导我如何使用JavaScript克隆最后的html元素。我希望在所有内容中使用自动递增的id进行克隆。但我看到的是克隆。我期待着遇到这种情况。我可以解释一下吗？

这是小提琴：https://jsfiddle.net/aucv3637/3/

    var i = 0;

function myFunction() {
  var original = document.getElementById('repeat');
  var clone = original.cloneNode(true);
  clone.id = "repeat" + ++i;
  clone.querySelectorAll('[id="fieldName"]')[0].id = "fieldName" + i;
  clone.querySelectorAll('[id="fieldType"]')[0].id = "fieldType" + i;
  clone.querySelectorAll('[name="mandatory"]')[0].name = "mandatory" + i;
  clone.querySelectorAll('[id="mandatory"]')[0].id = "mandatory" + i;
  clone.children[2].children[0].name = "mandatory" + i;

  original.parentNode.appendChild(clone);
};

    <table>
<tbody id="fieldsContent">                     
<tr id="repeat">                                                 <td><input type="text" id="fieldName"></td>                         <td>
<select name="fieldType" id="fieldType">                                                                                            <option value="Date">Date</option>
<option value="String">String</option><option value="Integer">Integer</option>
<option value="IA5String">IA5String</option>
</select>                        
</td>                         
<td><input type="checkbox" id="mandatory" name="mandatory">                                             </td>                                                                      </tr>                        
<tr id="repeat1">                                                 <td><input type="text" id="fieldName1"></td>                         <td>                            
<select name="fieldType" id="fieldType1">                                                                                            <option value="Date">Date</option>
<option value="String">String</option>
<option value="Integer">Integer</option>
<option value="IA5String">IA5String</option>
</select>                        
</td>                         
<td>                            
<input type="checkbox" id="mandatory1" name="mandatory1">                                                    </td>                                                                      </tr>
<tr id="repeat2">                                                 <td><input type="text" id="fieldName2"></td>                         <td>                            <select name="fieldType" id="fieldType2">                                                                                            <option value="Date">Date</option><option value="String">String</option>
<option value="Integer">Integer</option>
<option value="IA5String">IA5String</option>
</select>                        
</td>                         
<td>                            
<input type="checkbox" id="mandatory2" name="mandatory2">                                                    </td>                                                                      </tr>
</tbody>
</table>
<button id="start" name="start" onclick="myFunction()">
  <span>Add</span>
</button>

Answer 1

代码中的多个问题updated fiddle

• i未初始化
• 使用lastChild代替元素本身。
• 未在myFunction中包裹head。

更改为

var i = 0;

function myFunction() {
  var original = document.getElementById('repeat');
  var clone = original.cloneNode(true);
  clone.id = "repeat" + ++i;
  clone.querySelectorAll('[id="fieldName"]')[0].id = "fieldName" + i;
  clone.querySelectorAll('[id="fieldType"]')[0].id = "fieldType" + i;
  clone.querySelectorAll('[name="mandatory"]')[0].name = "mandatory" + i;
  clone.querySelectorAll('[id="mandatory"]')[0].id = "mandatory" + i;
  clone.children[2].children[0].name = "mandatory" + i;

  original.parentNode.appendChild(clone);
};

修改

您需要在querySelector和last-child

中使用 START-with id selector

function myFunction() {
  var original = document.querySelector('tr[id^="repeat"]:last-child');
  var match = original.id.match(/\d+$/g);
  var idCounter = !!match ? +match[0] : 0;
  var clone = original.cloneNode(true);
  var i = (idCounter + 1);
  clone.id = "repeat" + i;
  console.log(clone);
  clone.querySelector('[id^="fieldName"]').id = "fieldName" + i;
  clone.querySelector('[id^="fieldType"]').id = "fieldType" + i;
  clone.querySelector('[name^="mandatory"]').name = "mandatory" + i;
  clone.querySelector('[id^="mandatory"]').id = "mandatory" + i;
  clone.children[2].children[0].name = "mandatory" + i;

  original.parentNode.appendChild(clone);
};

演示

function myFunction() {
  var original = document.querySelector('tr[id^="repeat"]:last-child');
  var match = original.id.match(/\d+$/g);
  var idCounter = !!match ? +match[0] : 0;
  console.log(idCounter);
  var clone = original.cloneNode(true);
  var i = (idCounter + 1);
  clone.id = "repeat" + i;
  console.log(clone);
  clone.querySelector('[id^="fieldName"]').id = "fieldName" + i;
  clone.querySelector('[id^="fieldType"]').id = "fieldType" + i;
  clone.querySelector('[name^="mandatory"]').name = "mandatory" + i;
  clone.querySelector('[id^="mandatory"]').id = "mandatory" + i;
  clone.children[2].children[0].name = "mandatory" + i;

  original.parentNode.appendChild(clone);
};

<table>
  <tbody id="fieldsContent">
    <tr id="repeat">
      <td><input type="text" id="fieldName"></td>
      <td>
        <select name="fieldType" id="fieldType">                                                                                            <option value="Date">Date</option>
<option value="String">String</option><option value="Integer">Integer</option>
<option value="IA5String">IA5String</option>
</select>
      </td>
      <td><input type="checkbox" id="mandatory" name="mandatory"> </td>
    </tr>
    <tr id="repeat1">
      <td><input type="text" id="fieldName1"></td>
      <td>
        <select name="fieldType" id="fieldType1">                                                                                            <option value="Date">Date</option>
<option value="String">String</option>
<option value="Integer">Integer</option>
<option value="IA5String">IA5String</option>
</select>
      </td>
      <td>
        <input type="checkbox" id="mandatory1" name="mandatory1"> </td>
    </tr>
    <tr id="repeat2">
      <td><input type="text" id="fieldName2"></td>
      <td> <select name="fieldType" id="fieldType2">                                                                                            <option value="Date">Date</option><option value="String">String</option>
<option value="Integer">Integer</option>
<option value="IA5String">IA5String</option>
</select>
      </td>
      <td>
        <input type="checkbox" id="mandatory2" name="mandatory2"> </td>
    </tr>
  </tbody>
</table>
<button id="start" name="start" onclick="myFunction()">
  <span>Add</span>
</button>