CODEWITHSUNDEEP
javascriptjqueryhtml
Kayon
Kayon

Reputation: 11

Dynamically created divs

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,

Upvotes: 1

Views: 151

Answers (4)

TheGr8_Nik
TheGr8_Nik

Reputation: 3200

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

Upvotes: 2

Brian Wright
Brian Wright

Reputation: 877

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/

Upvotes: 0

murli2308
murli2308

Reputation: 3002

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/

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26163

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.

Upvotes: 2

Related Questions