Dynamically created divs

Question

I'm trying to dynamically create div, but I didn't find the right way to achieve it.

I'd like to show 1 div called options containing 4 other divs when a first one in body is clicked.

<div id="mot">mot</div>
<script type="text/javaScript"> 
 $(document).ready(function () {
 $("#mot").click(function () {
 $options= $('<div class="past"/></div><div class="syno"/></div><div class="anto"/></div><div class="trans"/></div>').text('HELLO');
 $('body').append($options);
 });
});

What could I change to have it's own text for each div instead of Hello for all of them ?

Another question, then displaying the div 'options' I'd like to create new div, for example a red one when .past is clicked, a blue one for .syno. I was thinking about a if/else parametere but i'm not sure of this.

So these are the few problems with this basic code, it's probably very easy to solve but i'm a beginner in jquery. Thank you,

• Blazemonger: Just create each div separately and append them one by one. Or create them separately, .add() them to a single object, then append them all at once.
• Kayon: Wow, thanks everybody for all these quick responses, I'll take Archer solution for now and will try to work on the second part of the problem.

Answer 1

Try this...

$(document).ready(function () {
 $("#mot").click(function () {
 var $options = $('<div class="options" />');
 var $past = $('<div class="past" />').text("past");
 var $syno = $('<div class="syno" />').text("syno");
 var $anto = $('<div class="anto" />').text("anto");
 var $trans = $('<div class="trans" />').text("trans");
 $options.append($past)
 .append($syno)
 .append($anto)
 .append($trans);
 $('body').append($options);
 });
});

Just break it up into smaller actions (make more elements) and then you can modify them as required before adding them to the body.

Note: Your html was badly formatted when you created $option. You were closing each div tag like this, <div />, but then following it with a closing div tag </div>. You only need one or the other - this example code does not do that.

• Kayon: Ok thanks so for each new div created dynamically I have to call a new function ?
• Reinstate Monica Cellio: If you wanted to create a div with class options, with each of the other divs inside it then it would make sense to put it in a function so you can just call that whenever you need to. Is that what you mean?
• Kayon: Yes, for now I have this, tell me if I am on the right way : EDIT : the post is too long I copy it in a new answer

Answer 2

You are closing div two times:

<div class="past"/></div>
 ^ ^
 closed two times

use this instead

$options= $('<div class="past"></div><div class="syno"></div><div class="anto"></div><div class="trans"></div>').text('HELLO');
$('body').append($options);

for insert a new div every times you click a div you can make so:

$('div').click(function(){
 var actClass = $(this).attr('class');
 if( actClass ){
 $('body').append('<div class="coloredDiv '+actClass+'Color" /div>');
 }
});

and in your css file define the colors:

.pastColor{
 background-color: red;
}
.synoColor{
 background-color: yellow;
}
.antoColor{
 background-color: green;
}
.transColor{
 background-color: blue;
}

Here you can find the jsFiddle demo

Answer 3

you can create the four div's separately and then you can append it to body on click.

Below is code to do same..

var div1 = jQuery('<div/>', {
 text: 'text1'
});
var div2 = jQuery('<div/>', {
 text: 'text2'
});
var div3 = jQuery('<div/>', {
 text: 'text3'
});
var div4 = jQuery('<div/>', {
 text: 'text4'
});
$("#mot").click(function () {
 $('body').append(div1,div2,div3,div4);
}); 

Here is the fiddle for same.

http://jsfiddle.net/murli2308/sy6e2/1/

Answer 4

You could also do this all in one line.

$('<div class="past">Hello</div><div class="syno">Goodbye</div><div class="anto">Something else</div><div class="trans">Another thing</div>').appendTo('Body');

Here's the fiddle: http://jsfiddle.net/N52DF/

To have the created div create a new div on click, simply use another click() function. To add the color to the created div, use jquery's .css() function.

$('.past').click(function(){
 $('<div class="option1">Option</div>')
 .appendTo('body')
 .css('background','red');
 });

Since you'll be dynamically creating the new divs, they won't have any javascript functions bound to them initially, so you'll need to call a function to bind the click event. See the updated fiddle for an example.

http://jsfiddle.net/N52DF/1/