1

I'm able to make a div tag using the document.createElement('div')

However i do not know how to give it a unique id.

can anyone help me with this.

I know how to do it using innerHTML however it very cumbersome. (I heard it not a good way of creating a layout.)

Tom
  • 149
  • 2
  • 4
  • 11
  • Is the focus here on *unique* as in a random-generated number, or how to cleanly assign an id to the `div` without going into innerHTML as you mentioned? – Jonathan M Sep 13 '11 at 19:08
  • Did none of these answers help you? If one did, click the checkmark next to it. – Jonathan M Sep 16 '11 at 20:06

4 Answers4

9

Understanding unique as an ID that must not get mixed up with any other ID's in the markup, the easiest way to go is to get the local timestamp. As shown here:

let div = document.createElement("div");
// With old JS syntax
div.id = "div_" + new Date().getTime().toString();
// With ES6 Template Strings you can also write
div.id = `div_ ${new Date().getTime().toString()}`;

Though working with createElement can be a bit of a troublemaker, you should be using some JavaScript framework that solve the tiny little details for you (such as jQuery, Mootools, Dojo, etc.).

Community
  • 1
  • 1
Joel A. Villarreal Bertoldi
  • 7,829
  • 8
  • 35
  • 51
  • 1
    I like this test, but I'm worried it's not quite good enough. When I run this back to back, I get two values that are identical. In my "live" test, I got ~6ms differnce in some cases, which is rather close. – isaaclw May 03 '13 at 17:11
  • 1
    This might be overkill, but I'm using this: `var datestr = new Date().getTime().toString(), randomstr = Math.random().toString(); return string + '_' + MD5(datestr + randomstr);` MD5 is a function from webtoolkit: http://www.webtoolkit.info/djs/webtoolkit.md5.js – isaaclw May 03 '13 at 17:57
4
var d = document.createElement('div');
d.id = 'myElementId';
d.innerHTML = 'This is the content!';

Or

var d = document.createElement('div')
   .id = 'myElementId';

.. same thing really, just a different way of laying it out.

This takes care of assigning the id. Now, for unique. The best way is to use the current time, as it isn't likely to repeat since javascript time is on miliseconds.

Putting it together:

var d = document.createElement('div')
   .id = 'id'+new Date().getTime().toString();

This does have the chance to duplicate itself in the right circumstances. If it is is hyper-critical to maintain uniqueness, then the only way is to use a pointer:

// establish  a variable to hold the pointer
var uniquePointer = 0;

// every time you use the pointer to create a new element, increment the pointer.
var d = document.createElement('div')
   .id = 'id'+uniquePointer;
uniquePointer ++;
Chris Baker
  • 49,926
  • 12
  • 96
  • 115
  • I'll remove it now you've updated your answer, but it was a completely valid downvote and should be take as constructive criticism – Adam Hopkinson Sep 13 '11 at 19:11
  • 3
    I'll take it how I want to, and we now have a generation-spanning blood feud. I shall commence indoctrinating my children within the hour; prepare yourself. – Chris Baker Sep 13 '11 at 19:12
2

You can use a library for this: https://github.com/LiosK/UUID.js

It "Generates RFC 4122 compliant UUIDs."

Having the element you can assign it the id using the code:

element.id = "somePrefix" + UUID.generate()
mateusz.fiolka
  • 3,032
  • 2
  • 23
  • 24
-1
var myDiv = document.createElement('div');
myDiv.id = "myUniqueId";
Jonathan M
  • 17,145
  • 9
  • 58
  • 91