title: jQuery: Modify appended object's CSS
body: <pre><code>$('#foo').css({color:'black'}).append('&lt;div&gt;bar&lt;/div&gt;').css({color:'red'});
  </code></pre>
  
  <p><br />
  Given the above, the <code>css()</code> method is applied to <code>foo</code>, but how could you get it to apply to the div that wraps "bar"?</p>
  
  <p>The only way I could think of to do this in the same execution line would be to create a jQuery div object inside of the <code>append(function(){ ... })</code> and apply the styling there.</p>
  
  <p><br /></p>
  
  <hr>
  
  <p><em><strong>Note:</strong> I'm trying to avoid inline styling (eg <code>.append('&lt;div style="color:red;"&gt;bar&lt;/div&gt;')</code>).</em></p>
  
  <hr>
  
  <p><em><strong>Update:</strong> I'm actually applying css to foo as well; The example has been updated to reflect this</em></p>