CODEWITHSUNDEEP
jquery
user1211133
user1211133

Reputation:

How to add Divs dynamically side by side using Jquery?

can you please help me how to add Divs side by side dynamically using Jquery. Here is my code

$(document).ready(function() {
    $('#idButton').click(function() {
        for (int i = 0; i <= 3; i++) {
            $('body').append('<div id="divId"+'
            i ' style="height:80px;width:80px;background-image:url('
            flashcard1.png ');">Images</div>');
        }
    });
});​

Upvotes: 3

Views: 3286

Answers (4)

Per Salbark
Per Salbark

Reputation: 3645

Here is a fiddle for you.

Like everyone else said you nead to use the css-attribute float.

And also in javaScript variables are declared as var, not int.

Upvotes: 1

xdazz
xdazz

Reputation: 160843

There is no int in javascript, should be var.

for (var i = 0; i <= 3; i++) {
   $('body').append('<div id="divId' + i + '" style="height:80px;width:80px;background-image:url(\'flashcard1.png\');">Images</div>');
}

Or

for (var i = 0; i <= 3; i++) {
  $('<div />', {
    id: 'divId' + i,
    style: "height:80px;width:80px;background-image:url('flashcard1.png');"
   }).text('Images').appendTo("body");
}​

Upvotes: 0

Arpit Srivastava
Arpit Srivastava

Reputation: 2235

Add div css either float:left or float:right

Upvotes: 0

Vinayak Phal
Vinayak Phal

Reputation: 8919

To add it side by side we need float css property.

If you give float:left It will add side by side. Try with float.

Try like this... And make int to var as xdazz stated.

$(document).ready(function() {
    $('#idButton').click(function() {
        for (var i = 0; i <= 3; i++) {
            $('body').append('<div id="divId"+'
            i ' style="height:80px;width:80px;float:left;background-image:url(\'
            flashcard1.png \');">Images</div>');
        }
    });
});​

One more thing after adding float you have to clear it to work the next markup correctly.

Upvotes: 3

Related Questions