Question

I am creating an object dynamically. I am wondering how do I access it? Some of these objects need to be hidden through other means than a click (programmatically, button clicks, links, etc). So I dont think I could use .on. How would I go about accessing these to hide them?

$(document).ready(function() {
$('body').append('<div id="testdiv">Test DIV</div>');

}); 

$('#testdiv').hide();

Answer 1

You reverse your logic. Instead of .append(), you should use .appendTo()

var myRef = $("<div id=\"testdiv\">Test DIV</div>").appendTo( document.body );

That way, you can keep a reference to that newly created DOM node / jQuery object.

myRef.hide();

---

It’s always better to store a cached reference into a variable, so you can access a node from pure ECMA land, so to speak. The need to re-query for a DOM node, is just much less effiecient.

^{One word of caution: variables declared by var do only own function scope. That means if you want to access that reference from “outside” of your ready handler, you would need to declare that variable in a parent context for instance.}