jQuery ways to dynamically .append a div to the dom, and then find it later without setting an ID, class, or anyway to indentify it

Update: Everyone that contributed, it's well appreciated, you all are very kind and generous and all of you deserve my dear respect. Cheers.

Note: I'm making a simple jQuery tooltip plugin, the tooltip will fire on mouseover. The mouseover will create an instance of the div tool-tip that will be specific to each anchor that launched the div tool-tip. So each anchor with the class .c_tool will have its own created div that will erase after mouseout. Anyway all those details are irrelevant. What is important is how to create a div with .append() or .add() on and then find a way to call it and apply actions to that div without setting an identifier (id), class, or any means to identify it.

I know theres a way you could find the div by counting, so if you gave every created div the same class and then counted them to find that one, however I don't kn开发者_StackOverflowow if this is the most efficient method that is why I'm asking for help.

I'm not going to post the whole plugin script thats unnecessary, so I'll paste a simplified version.

<a href="#" class="c_tool">hover me</a>
<a href="#" class="c_tool">hover me</a>

$(document).ready(function() {

    obj = $('a.c_tool');
    obj.mouseover(function() {

        /// append div to body it will be specific to each item with class c_tool, however I don't want to set an ID, or CLASS to the appended div

    }).mouseout(function() {

        /// remove added div without setting ID or class to it.
    });

});

Working example:

http://jsfiddle.net/xzL6F/

$(document).ready(function() {

    var tooltip;

    obj = $('a.c_tool');
    obj.mouseover(function() {
        var element = $('<div>', {
             html:   "I'm a tooltip"
        });

        tooltip = element.appendTo($("body"));


        /// append div to body it will be specific to each item with class c_tool, however I don't want to set an ID, or CLASS to the appended div

    }).mouseout(function() {
        tooltip.remove();
        /// remove added div without setting ID or class to it.
    });

});

To create a new DOM node you can use the jQuery constructor, like

$(document).ready(function() {
    obj = $('a.c_tool');

    obj.mouseover(function() {
        if(!$.data(this, 'ref')) {
            $.data(this, 'ref', $ref = $('<div>', {
                 html:   'Hello World!'
            }).appendTo(document.body));
        }
    }).mouseout(function() {
        $.data(this, 'ref').remove();
    });
});

.appendTo() returns the DOM node of invocation (in this case, the newly created DIV) as jQuery object. That way you can store the reference in a variable for instance and access it later.

Referring your comment:
To remove all stored references, you should do this:

$('a.c_tool').each(function(index, node) {
    $.removeData(node, 'ref');
});

you can use $.append(


);

http://api.jquery.com/append/

and to find the DOM created dynamically u can use

$("#dynamicallyCreatedDOMid").live("yourCustomTrigger",function(){


});

http://api.jquery.com/live/