Using Javascript to generate unique IDs for div tags (html)

Question

I have the following HTML code:

<div id="ID_unique"></div>

<span class="a_random_class">a</span>
<span class="a_random_class">b</span>
<span class="a_random_class">c</span>

And the Javascript

<script>
setTimeout(function() {

  var element = document.getElementById("An_ID");  

  Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e) {

    var example = element.appendChild(e.cloneNode(true));
        example.className += " timeline-date";

    var div = document.createElement('div');
        div.id = "id_frame";

    div.appendChild(example);   
    element.appendChild(div);

  });
}, 300);
</script>

It will wrap the result of the cloneNode inside a HTML div, and those generated div tags will have the same ID id_frame ... However since in HTML all IDs must be unique, how can I tell Javascript to generate a unique ID for each result?

Vivek Gupta · Accepted Answer · 2015-06-03 06:57:38Z

1

use counter as global variable and append that to your id and increment counter after assigning id like below:

<script>
setTimeout(function() {

  var element = document.getElementById("An_ID");  
   var counter = 0;
  Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e) {

    var example = element.appendChild(e.cloneNode(true));
        example.className += " timeline-date";

    var div = document.createElement('div');
        div.id = "id_frame"+counter;
        counter++;
    div.appendChild(example);   
    element.appendChild(div);

  });
}, 300);
</script>

answered Jun 3, 2015 at 6:57

Vivek Gupta

1,0455 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

m4lt3 Over a year ago

I would rather use the index of the forEach, than creating a global variable, see my answere

Daniel Felipe Over a year ago

Hi there @VivekGupta thank you, it indeed works, may I ask, is it possible to use with getElementById()? if so, how?

Vivek Gupta Over a year ago

@DanielFelipe where you want to use as document.getElementById(), I didn't get it

Daniel Felipe Over a year ago

I want to add another cloneNode results to a div with the recently generated ID, something like var another_element = document.getElementById("id_frame"+counter); would that be possible somehow?

Vivek Gupta Over a year ago

yes @Daniel it is possible just use it before incrementing counter

user663031 · Accepted Answer · 2015-06-03 07:13:18Z

1

In general, constructing dynamic IDs and then finding the corresponding elements again later with getElementById is an anti-pattern, perhaps going back to the bad old jQuery days. Instead, just remember the elements themselves. In your case, something like

var my_divs;

setTimeout(function() {

  var element = document.getElementById("An_ID");  
  var elts    = document.querySelectorAll(".a_random_class");

  my_divs     = Array.prototype.forEach.map(elts, function(e) {
    var example = element.appendChild(e.cloneNode(true));
    example.className += " timeline-date";

    var div = document.createElement('div');
    div.appendChild(example);   
    element.appendChild(div);
    return div;

  });
}, 300);

Now you can simply refer to the elements you created and added with my_divs[i], without having to do something like document.getElementById('id_frame'+i).

answered Jun 3, 2015 at 7:13

user663031

1 Comment

Daniel Felipe Over a year ago

Oh, very useful @torazaburo, I greatly appreciate your time, ;P I will check my code. Thank you very much!

m4lt3 · Accepted Answer · 2015-06-03 07:00:34Z

0

Just use the index of the forEach loop:

<script>
setTimeout(function() {

var element = document.getElementById("An_ID");  
Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e, index) {

var example = element.appendChild(e.cloneNode(true));
    example.className += " timeline-date";

var div = document.createElement('div');
    div.id = "id_frame"+index;
div.appendChild(example);   
element.appendChild(div);

});
}, 300);
</script>

answered Jun 3, 2015 at 7:00

m4lt3

4652 silver badges16 bronze badges

Comments

Andreas Louv · Accepted Answer · 2015-06-03 07:02:48Z

You can make a util function:

var uniqueId = (function() {
  var counter = 0;
  return function(prefix) {
    return (prefix ? prefix : '') + (++counter);
  };
})();

console.log(uniqueId()); // 1
console.log(uniqueId()); // 2
console.log(uniqueId('my-prefix-')); // my-prefix-3

Then implement it like this:

setTimeout(function() {

  var element = document.getElementById("An_ID");  

  [].forEach.call(document.querySelectorAll(".a_random_class"), function(e) {
    var div = document.createElement('div');
    div.id = uniqueId('id_frame'); // will be id_frame1, id_frame2, id_frame3 ...

    var example = element.appendChild(e.cloneNode(true));
    example.className += " timeline-date";    

    div.appendChild(example);
    element.appendChild(div);
  });
}, 300);

Nagaraja Thangavelu · Accepted Answer · 2015-06-03 07:03:37Z

0

You can do it by having a global count variable, increment it and add it along with the div id name.

<script> 
var id_cnt = 0;

setTimeout(function() {
var element = document.getElementById("An_ID");  
Array.prototype.forEach.call(document.querySelectorAll(".a_random_class"), function(e) {

var example = element.appendChild(e.cloneNode(true));
    example.className += " timeline-date";

var div = document.createElement('div');
    div.id = "id_frame_" + id_cnt++;

div.appendChild(example);   
element.appendChild(div);

});
}, 300);
</script>

Didn't test, but just try it.

answered Jun 3, 2015 at 7:03

Nagaraja Thangavelu

1,1781 gold badge15 silver badges33 bronze badges

Collectives™ on Stack Overflow

Using Javascript to generate unique IDs for div tags (html)

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related