Create a div with jquery on hover?

Question

So I've got a pretty stupid question. Is it possible, to create a div on hover? I don't have access to the file that creates a list for me, so it creates this.

<ul class="class">
    <li>content</li>
    <li>content</li>
    <li>content</li>
</ul>

In this particular project, I can't edit that file directly. but I'd like to create a on the outside of each list item

   <div>stuff</div><li>content</li>

I know it's not an IDEAL setup, but it's the way I'd like to do it. Worse comes to worse, I've got another way that WORKS, but I'd like -

something like

jQuery('#target').hover(function() {
    jQuery(this).find('<li>').echoBefore('<div class="class">stuff</div>')
    });

That would be my IDEAL solution to the sticky situation I've got :P

Answer 1

You will want to use the method append

like so

jQuery('#target').hover(function() {
    jQuery(this).find('li').append('<div class="class">stuff</div>')
});

if you want to access this div after appending it, you can use jquery's method of creating a new element like this

jQuery('#target').hover(function() {
    var div = jQuery('<div></div>');
    div.addClass('class').html('stuff');
    jQuery(this).find('li').append(div);
    div.html('this is updated html after appendage');
});

Answer 2

To create the DIVs on the outside of each LI you can use the following code:

jQuery(this).find('li').before('<div class="class">stuff</div>');

However, if it's all the same, I would recommend creating those DIVs on the inside of the LIs using this code:

jQuery(this).find('li').prepend('<div class="class">stuff</div>');

Answer 3

This would work:

$('#target').hover(function(){
    $(this).find('li').append('<div>stuff</div>');
});

But,when you hover multiple times, the div would be created multiple times.