CODEWITHSUNDEEP
javascriptjquery
SomeoneS
SomeoneS

Reputation: 1279

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

Upvotes: 1

Views: 2805

Answers (7)

cool
cool

Reputation: 3505

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.

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206508

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">ADD</button>
<div id="parent"></div>

Upvotes: 7

adeneo
adeneo

Reputation: 318312

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

Upvotes: 0

cliffs of insanity
cliffs of insanity

Reputation: 3694

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

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87083

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

Upvotes: 0

ltiong_dbl
ltiong_dbl

Reputation: 3216

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

Upvotes: 1

NoNoNo
NoNoNo

Reputation: 168

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

Upvotes: 0

Related Questions