Javascript 如何将具有修改（id）内容的内联模板元素附加到另一个元素？

在下面的示例中，我希望每次单击add按钮时，将元素添加到模板div中，并将其附加到landingzone类元素。但同时我需要NEWID为新元素进行更改。当然，这只是一个示例，表中的内容可以是div或其他任何内容

表格：

<form method="post">
   <input type="text" name="title">
   <input type="text" name="number">
   <table>
      <thead>
         <tr> <th>Parts</th> </tr>
      </thead>
      <tbody class="landingzone">
      </tbody>
   </table>
   <input type="submit" value="Save">
   <input type="button" name"add" class="add" value="Save">
</form>

部分

模板：

<div class="template" style="display: hidden">
   <tr id="NEWID">
      <td>
         <input type="text" name="part_NEWID">
      </td>
   </tr>       
</div>

---

实现这一目标的最佳方式是什么？

正如@Andrea在评论中所说的，如果能提供更多细节，我们将不胜感激

我想你想要的是：

const $template = $('.template').clone()
$template.attr('id', 'someId')
$template.find('input[name="part_NEWID"]').attr('name', 'part_someId')
$('.landingzone').append($template)

如果您在函数中需要它：

function appendTemplateToLandingZone (newId) {
  const $template = $('.template').clone()
  $template.attr('id', newId)
  $template.find('input[name="part_NEWID"]').attr('name', 'part_' + newId)
  $('.landingzone').append($template)
}

---

我还没有测试过这个，所以可能需要稍微调整一下。如果你能提供一个基本的，我会让它在那里工作。

这里有一个你需要的例子。javascript将在不更改任何html的情况下工作，除了替换

name“add”

应该是

name=“add”

我在这里所做的是获取

模板tr的id，并用increment设置它和
输入
字段名


var$landingzone=$（'.landingzone'）；
变量$add=$（'.add'）；
var desiredId='id'；
$add.on（'click'，function（）{
var$template=$（'.template'）。find（'tr'）；
var id=$template.attr（'id'）；
var idArr=id.split（'-'）；
如果（！idArr[1]）{
id=desiredId+'-1'；
}否则{
id=desiredId+'-'+（parseInt（idArr[1]）+1）；
}
$template.attr（'id'，id）；
$template.find（'input'）.attr（'name'，'part_'+id）；
log（'input id-->'+id'，input name-->'+'part\+id）；
$landingzone.append（$template.clone（））；
})

部分
请阅读并向我们展示您的尝试。所以我们可以从这开始讨论你们的问题。你们是对的@Andrea。这次我很抱歉。我已经红色链接，下次会问一个更详细、更容易理解的问题。谢谢。Thx@goldylucks。下次将准备jsbin或JSFIDLE。