javascript - 克隆模板后如何增加 ID 并使用它？

Question

是否可以克隆模板，然后在克隆后增加模板 ID 以及如何在克隆后使用新 ID。

我想增加或创建新 ID，因为<div id= "id1">我想更改包含在我的模板中的 div id。

这是我的代码：

function cloneNewId() {
  var tmpl = document.getElementById('tempId');
  document.body.appendChild(tmpl.content.cloneNode(true));
}
cloneNewId();
cloneNewId();

<template id="tempId"> 
  <div id = "id1">
    <select id = "Id"> 
      <option value= "1"> </option>
      <option value="2"> </option>
    </select>
  </div>
</template>

有关 MDN 中模板的更多信息，这是一个随时可用的很棒的 JavaScript 资源。

标签： javascript

Answer 1

您可以使用以下代码增加您的 div id。我认为这个代码示例解决了你的问题

  var tmpl = document.getElementById('tempId');
  document.body.appendChild(tmpl.content.cloneNode(true));
  var append=tmpl.content.cloneNode(true);
append.children[0].id="id2";
console.log(append,"Append");
 document.body.appendChild(append);
 

<template id="tempId"> 
  <div id = "id1">
    <select id = "Id"> 
      <option value= "1"> </option>
      <option value="2"> </option>
    </select>
  </div>
</template>