Question

I am trying to create a var for a dom element to clean things up but it doesn’t give me expected results. The reason I think it’s doing this is because the element isn’t yet created when I run the function. I could move the var after the .prepend() is called but what if I’d like to keep all my vars at the top?

Would adding .on() somewhere in this script fix my problem or should I just move the var down a few lines after .prepend is run, and forget about keeping vars up top?

    (function () {
        var cp = $(".call-out p")

        $('li').eq(2).prepend('hi');
        $('div.call-out').prepend("<p>MY UL</p>");
        cp.css({
             'font-size': '3em',
             'background': 'orange'
        });
        cp.animate({
              width: "1000px",
              height: "1250px"
        });
        cp.click(function (e) {
             $(this).animate({
              width: "125px",
              height: "90px"
       });
     });
   })();

Answer 1

A jQuery object can be constructed from html so you can do it this way:

var cp = $("<p>MY UL</p>").css({....});/* can add css or event handlers before insert into DOM*/

$('li').eq(2).prepend('hi');
$('div.call-out').prepend(cp);
 /* although created outside the DOM, once inserted the object still exists to use jQuery methods on*/
 cp.animate({....});

Methods like html() and prepend() amongst others will accept a multiple types as content arguments including a jQuery object

Look closely at the content definition for prepend() in API docs: http://api.jquery.com/prepend/