jQuery: How do I make a manipulation dependant on the DOM prior to insertion, relative to the insertion?

Question

I want to make it so that I .append() to a value based on the status of some other element relative to the place I'm inserting into the dom. What I really want is a trigger that fires after the element has been inserted.

$("#foo").append(
  $('<div />').load( function () {
    if ( $(this).find('.foo') {
      $(this).append( "<span>foobar</span>" )
    }
  } )
);

In the above example I use .load() as pseudo-code to do what I want -- It doesn't work for me. Here, .load() executes the function and sets $(this) to the element I attached the event too.

Answer 1

It sounds like maybe you just need to back some of your code out of the append(). Right now, the argument sent to append() isn't valid.

Based on your example, I guess I'm just not sure why you don't do something like this:

var $foo = $('#foo');

if( $foo.find('.foo').length ) {
    $foo.append("<span>foobar</span>");
}

Please provide more info if this doesn't meet your need.