I have Problems with inserting div in Jquery

Question

I am trying to inserting div in Jquery, like in the example below. It doesn't work.

Jquery:

$('<div />', {
    $('<img />', { "src": "/Pages/Images/calendar.png").addClass('image').appendTo($div);
    $('<input/>', { "type": "text", "class": "ctb" }).addClass('ctb').appendTo($div);
    }).addClass('sto').appendTo($div);

The output I want is like the image below:

Demo

have you seen the console and tried to fix the issues in it..? — Rajaprabhu Aravindasamy, Mar 25 '14 at 13:27

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

You didn't create $(div) yet. You should do it like

var div = $('<div></div>');
$(div).append(...);

Btw, the best method to create element is

document.createElement();

jQuery document.createElement equivalent?

edited May 23 '17 at 12:20

Community

1
1

answered Mar 25 '14 at 13:29

Baseleus

142
8

score 0 · Accepted Answer · answered Mar 25 '14 at 13:33

0

You can't append the elements like that you must do this

$('<div>', {
    "class": "sto"
}).append('<img />', {
    "src": "/Pages/Images/calendar.png",
    "class": "image"
}).append('<input/>', {
    "type": "text",
    "class": "ctb"
}).appendTo($div);

answered Mar 25 '14 at 13:33

Anton

32,245
5
44
54

I have test it, works fine. But the problem is that a input field appears on the card. I don't want it. I want it like the image above. What am I able to do, to fix it? I have a demo with your part of code: http://jsfiddle.net/62QY8/46/ – AdiT Mar 25 '14 at 13:51

score 0 · Answer 3 · answered Mar 25 '14 at 13:33

0

There were a lot of syntax errors.

I changed you part to:

$('<div />').append($('<img src="/Pages/Images/calendar.png" class="image" />')).appendTo($div);
$('<input type="text" class="ctb sto" />').appendTo($div);

Demo:http://jsfiddle.net/62QY8/45/

answered Mar 25 '14 at 13:33

Amit Joki

58,320
7
77
95

But can You help me to fix it to look like the image above? – AdiT Mar 25 '14 at 14:14

I have Problems with inserting div in Jquery

3 Answers3