Question

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

我想为<div id= "id1">增加或创建新ID，我想更改模板中包含的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>

More info about templates in MDN，这是一个随时可用的强大JavaScript资源。

Answer 1

如果要构建可重复使用的模板，则只需在以下函数中返回模板文字即可：

下面的代码将要递增的索引作为参数，并在函数中使用它。

函数将在调用后返回模板。
您可以调用该函数并根据需要输入您的templateID。

function cloneTemplate(index, newID) {
	return `
  	<div id="${newID}">
    	  <span>Generate your own template here</span>
          <p>Hello ${index}</p>
        </div>
        `
}

let body = document.querySelector('body')

for (let i = 0; i < 3; i++) {
	body.innerHTML += cloneTemplate(i, `template${i}`)
}

这件事将输出三个具有不同ID的模板。
这是您要达到的目标吗？

Answer 2

您可以使用Element.querySelector获取克隆的div，然后直接在克隆的div中设置ID。另外，由于调用者将想知道新生成的ID，因此该函数可以返回其值：

let currentId = 1;

function cloneNewId() {
  const tmpl = document.getElementById('tempId');
  const clone = tmpl.content.cloneNode(true);
  const div = clone.querySelector('#id1');
  currentId += 1;
  div.id = `id${currentId}`;
  document.body.appendChild(clone);
  return div.id;
}

// Example:
console.log('First ID is:', cloneNewId());
console.log('Second ID is:', cloneNewId());

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

Answer 3

您可以使用以下代码来增加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>

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

3 个答案: