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.)

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.)

• javascript
• html
• unique
• innerhtml
• createelement

• 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 Commented Sep 13, 2011 at 19:08
• Did none of these answers help you? If one did, click the checkmark next to it. – Jonathan M Commented Sep 16, 2011 at 20:06

4 Answers 4

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.).

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 ++;

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()

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