How do I perform a jQuery function on an element after it has been inserted into the DOM?

Question

Consider the following code

    $li         = $('<li></li>');
    $divHandle  = $('<div></div>');
    $divContent = $('<div></div>');
    $i          = $('<i></i>');
    $span       = $('<span></span>');
    $spanEnd    = $('<span></span>');
    $spanIndex  = $('<span></span>');
    $wrapper    = $('<div></div>');

    $divHandle.addClass('dd-handle').addClass('dd3-handle');
    $divContent.addClass('dd3-content').append($spanIndex).append($span);

    $i.attr('title','Delete this Node').addClass('icon-remove-sign');
    $spanEnd.addClass('delete-element-node').append($i);

    $li.addClass('dd-item').addClass('dd3-item');

    $divContent.append($spanEnd);

    $li.append($wrapper.append($divHandle).append($divContent));

    $('#ExhibitNodes > ol').append($li);

In this, I am appending an element $divContent to a list item which is inserted into the DOM. My question is, is there a way that is akin to passing objects by reference (like PHP or something) that will allow you to do this:

    $divContent.fn.applyFunction();

After that $divContent has been inserted into the DOM. What we need to do, is insert the element to the DOM, with a loading indicator. The loading indicator will display while an AJAX procedure is called, and when the AJAX is complete and successful, it will update that element using that function. But in order to do that, we need to insert it to the DOM first.

Thoughts?

Answer 1

The answer was actually quite simple. I did not know this, and by sheer experimentation it worked.

http://jsfiddle.net/z3es9/

Basically, I create an element $element - give it some properties and a class, then $.append() it to the DOM.

Clicking the button modifies the original $element and passes the changes on to the inserted/appended DOM element.

Wow. Cool! Hope this helps someone!