jquery adding CSS to newly added div via append()

[ole90]

Hey guys,

I have a situation where I append a div to my page via an ajax call. I then want to update the CSS for it and access the property. For example

$('#container').append(\"<div id='char_'+d[0]><img src=\" + st + \"></div>\");
$('#char_'+d[0]).css({'position' :  'absolute', 'left' : '425', 'top' : '860'});

The problem is, no css is applied to my newly added div. The d[0] is an unique id and is used to give the div a unique name.

Any help from the gurus?

[VIPStephan]

First I don’t see where you have an AJAX call here. Can we see more than those two lines of code? Secondly you should avoid mixing JS and CSS (just as you should avoid mixing HTML and CSS or JS and HTML). Rather, you could assign a class to that appended element and style it in the stylesheet using that class then.

[venegal]

Originally Posted by ole90

$('#char_'+d[0]).css({'position' :  'absolute', 'left' : '425', 'top' : '860'});

This is bogus. The values for the 'left' and 'top' properties have to be either numbers or strings containing real CSS syntax. So, that's either 425 or '425px'.

[rnd me]

might be too soon, or there's an ID conflict.

fix your quotes below, but splitting it up into creation/appending phases gives you the extra handle you need to call .css() on an object.

var temp=$("<div id='char_'+d[0]><img src=\" + st + \"></div>");
$('#container').append(temp);
temp.css({'position' :  'absolute', 'left' : '425', 'top' : '860'});

PS: numerical <WIDTH> attribs without specified units default to pixels coords.

[venegal]

Originally Posted by rnd me

fix your quotes below, but splitting it up into creation/appending phases gives you the extra handle you need to call .css() on an object.

var temp=$("<div id='char_'+d[0]><img src=\" + st + \"></div>");
$('#container').append(temp);
temp.css({'position' :  'absolute', 'left' : '425', 'top' : '860'});

Apart from the fact that this saves a DOM query, this is not really an issue, and the other approach should work just fine.

There are a bunch of other issues, though:

$('#container').append(\"<div id='char_'+d[0]><img src=\" + st + \"></div>\");

rnd me already addressed that in his snippet, but it's worth pointing out: You can't escape your quotes like that. Why would you even do that?

$('#container').append(\"<div id='char_'+d[0]><img src=\" + st + \"></div>\");

There is no variable substitution in Javascript, so those are the literal strings "+d[0]" and " + st + ", which is not what you want.

A working version of the code could look like that:

PHP Code:

$('#container').append('<div id="char_' + d[0] + '"><img src="' + st + '"></div>');
$('#char_' + d[0]).css({'position' :  'absolute', 'left' : 425, 'top' : 860}); 


But I'd definitely prefer real DOM manipulation over innerHTML:

PHP Code:

$('<div/>', {
    id: 'char_' + d[0],
    css: {
        position: 'absolute',
        left: 425,
        top: 860
    }
}).append(
    $('<img/>', {
        src: st,
        alt: 'whatever'
    })
).appendTo('#container');