How to increment Id and use it after cloning a template?

Question

Is it possible to clone a template then increment template Id after cloning and how to use the new Id after cloning.

I want to increment or create new ID for <div id= "id1"> I want to change the div id that is included in my template.

Here is my code:

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, which is a great javascript resource to always have at hand.

What do you mean by template? A string containing html, a DOM element, etc? Are you using some framework if so you need to mention which one it is. Also include relevant code like how you currently are cloning said template — Patrick Evans, Oct 31 '18 at 05:20
Possible duplicate of [Is it possible to clone html element objects in JavaScript / JQuery?](https://stackoverflow.com/questions/921290/is-it-possible-to-clone-html-element-objects-in-javascript-jquery) — stealththeninja, Oct 31 '18 at 05:23
this is my first time post here. I've see a lot of solution but they've used jquery I'm looking for javascript answer only. TIA — Lep, Oct 31 '18 at 05:25
I updated my question hopefully I can get solution from you guys. thanks — Lep, Oct 31 '18 at 05:31
If you want to clone the template element itself, then you should do `var clone = tmpl.cloneNode(true); clone.id = 'my new id'; document.body.appendChild(clone);`. `templ.content` is a `DocumentFragment` which doesn't have an ID. — Felix Kling, Oct 31 '18 at 05:33
I'm sorry again very noob here. I edited my question and I think that is the output that I really want and hopefully I can get a solution on how to use the new created ID . — Lep, Oct 31 '18 at 05:40
May I ask if you want to clone an existed template or you may want to build a reusable template that can be called multiple times? — Arel Lin, Oct 31 '18 at 05:42
yes exactly what I want to do. To build a reusable template that will create new ID and still looking if it is possible to use or how to use the new created ID . This is all working with add button . — Lep, Oct 31 '18 at 05:43

score 0 · Answer 1 · answered Oct 31 '18 at 05:53

If you want to build a reusable template, you can simply return template literal in a function like this:

The code below will take the index you want to increment as a parameter, and use it in the function.

The function will return a template once it is called.
You can call the function and input your templateID whatever you want.

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}`)
}

This thing will output template three times with different id.
Is this what you want to achieve?

This is actually what I want but I'm thinking how will I'm going to put it in button and How will I going to use the new ID. — Lep, Oct 31 '18 at 06:01

lucascaro · Accepted Answer · 2018-10-31T06:27:55.447

0

You can get the cloned div using Element.querySelector and set the id directly in the cloned div. Also, since the invoker will want to know the newly generated ID, the function could return its value:

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>

edited Oct 31 '18 at 06:27

answered Oct 31 '18 at 06:13

lucascaro

16,550
4
37
47

1

This is working. Another question how can I use the new created ID after cloning. – Lep Oct 31 '18 at 06:22
Not sure what you mean by using the new id. The id itself will be the word 'id' + a number, so you can `getElementById('id2')` or `id3` etc. – lucascaro Oct 31 '18 at 06:24
should I use a function with a parameter that will get the new ID after cloning the template? – Lep Oct 31 '18 at 06:25
I see... The function itself should return the newly generated Id. That would allow the invoker to know which div has been just created. I'll add that to the answer – lucascaro Oct 31 '18 at 06:26
Updated! feel free to upvote and / or accept the answer if it solves your problem, or let me know if you have any follow-ups! – lucascaro Oct 31 '18 at 06:28
Thanks in advance bro hope you can help more people that is new to JS. – Lep Oct 31 '18 at 06:33

score 0 · Answer 3 · answered Oct 31 '18 at 06:24

You can increment your div id by using the following code. I think this code example solve your problem

  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>

How to increment Id and use it after cloning a template?

3 Answers3