How to append() an element and set its style with css() at the same time with jQuery


Tags: javascript,jquery,css

Problem :

I tried: $('#canvas').append('<div class="tile"></div>').css({left: leftPos, top: topPos});, but that sets the style of #canvas rather than the appended element.

I then tried: $('#canvas').append(('<div class="tile"></div>').css({left: leftPos, top: topPos}));, but that gives the error "Object <div class="tile"></div> has no method 'css'".

How can I add the element and set its style at the same time?



Solution :

You can do it like this:

$('<div class="tile"></div>').css({left: leftPos, top: topPos})
                             .appendTo('#canvas');

This creates the element, styles it, then uses .appendTo() to put it in the same place.

Alternatively, if you're using jQuery 1.4, you can specify the properties, including CSS when you create it, like this:

$('<div />', { class:'title', css: {left: leftPos, top: topPos}})
   .appendTo('#canvas');​

For more on this method, look at the jQuery() documentation, specifically the jQuery(html,props) section.


    CSS Howto..

    How to apply css on every 2nd child using nth-child() with jquery

    How to keep DIV from overlapping?

    Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong

    How to add space between inline-block elements?

    How to make a text or html tag look like a button

    Do you know about this weird thing. “AS3, Button width cannot change by setStyle(). However, inline CSS can change width.”

    sunken border when background-color css specified - how to avoid?

    How do I update an div css to display an complete image when section is complete?

    How to prevent inherit for H1?

    How to resize content area with CSS dynamically and no javascript

    How to create centered image slideshow behind website content

    How to add text with css without pseudo-element

    Animate css depending on mouse movement [how can I improve]

    How to minify and combine commented out css files

    How to style an embedded jsp inside another jsp?

    How to get dropdown menus to align with the correct menu tab

    How to apply a css class for jqGrid height property setGridHeight?

    How to center an element horizontally and vertically?

    How to change style for before/after in Angular?

    How do I align these links inside inline-blocks to the top?

    Three inline divs: how to make display all three inline OR three block (NOT 2 + 1)?

    CSS: How can I hide a class which has no other class or ID?

    How To Disable Pop Up Google Translation With HTML CSS

    How to make the Div fixed at a particular scroll location?

    Showing Text When Hovering Over an Image Link

    How To Outline a PNG (Transparent) image with CSS?

    How to place the block on the top of “second” screen using CSS?

    CSS - How to horizontally center table whos position is absolute

    How to make styling and functioning of form elements get not to break in all browsers?

    How to make a div 100% accross