i have one question regarding creation of divs:

I have button, when user clicks on it, javascript (or jquery) needs to create a div. But when user clicks again, it should create another div, but with different id. So, every time user clicks should be created div with different id.

I partialy know how to create div, but i have no idea how to make divs with different id's.

i have one question regarding creation of divs:

I have button, when user clicks on it, javascript (or jquery) needs to create a div. But when user clicks again, it should create another div, but with different id. So, every time user clicks should be created div with different id.

I partialy know how to create div, but i have no idea how to make divs with different id's.

• javascript
• jquery

7 Answers 7

var c = 0; // Counter

$('#add').on('click', function() {
  c += 1;
  $('#parent').append('<div id="child'+ c +'">'+ c +'</div>');
});

#child1{color:red;}
#child2{color:blue;}
#child3{color:orange;}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">ADD</button>
<div id="parent"></div>

var divcount = 1;
$('button').click(function(){
   $('<div/>', { id:'ment'+divcount++ })
});

Here's a random ID generator for you.

function createParanoidID() {
    return 'id_' + Math.floor(Math.random() * 9e99).toString(36);
}

createParanoidID();  // id_1js7ogi93ixt6x29w9svozegzhal67opdt3l3cf1iqidvgazlyaeh1ha7a74bswsg
createParanoidID();  // id_1fleq6chguuyyljhy39x3g7mg661mg845oj8fphnxgvm0bdgz7t3w0q01jptogvls
createParanoidID();  // id_ajz1ft17ml4eyz08gd3thcvq3fx1ycr927i0h2zgyw8bzq9wurv1gdfogly8tbls

Using a variable as counter and the "attr" function to set the id attribute.

HTML

<button id="button">Create Div</button>
<div class="container"></div>

jQuery:

$('#button').on('click', function() {

    var count = $('div.container div').length,
        id = count + Math.floor(Math.random() * 100);
    $('div.container').append('<div id="'+ id+'">ID of this div is: '+ id +' </div>');

});

DEMO

Here's the easy way to do this.

Firstly, you'll need a button:

​<button id="onClickOfThis​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ButtonAnewDivWithArandomIDwillBeInserted"></button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Then the javascript:

$("#onClickOfThisButtonAnewDivWithArandomIDwillBeInserted").on('click', function() {

var myID = 'randomIDnumber_'+Math.random()+Math.random()+Math.random()+Math.random()+Math.random()+Math.random();
var MyNewElement = document.createElement('div');
    MyNewElement.id = myID.replace(/\./g, '');
    $(MyNewElement).appendTo('body');
});

Here's a FIDDLE

If you don't want to use global counter like in previous answers you can always get number of children and use that as relative value from which you will create another id. Something like this (with jQuery):

function add_another_div() {
    var wrap_div = document.getElementById("#id_of_div_who_contain_all_childrens");
    var already_childs = $("#id_of_div_who_contain_all_childrens").children().length;
    var div = document.createElement('div');
    var divIdName = 'new_div-'+ (already_childs+1);
    div.setAttribute('id', divIdName);
    wrap_div.appendChild(div); 
}

Of course, this requires for all of your children to have same parent (same wrapper). If that is not the case, and they are separated across multiple wrappers, then just use unique class name for all of them, and count them like that. I found this approach much better and easier instead of using global counters which I need to take care about.