JavaScript generates empty div

[Pris]

I'm in an early stage of redesigning a website and have come across a very annoying problem.

The following JS snippet is necessary to show/hide an arrow to navigate across the page:

	$('<div></div>')
		.insertBefore('ul#gallery > li:even a');
		
	var galleryeven = $('ul#gallery > li:even:not(:last) div');
	var galleryodd = $('ul#gallery > li:odd');
	var galleryimg = $('ul#gallery > li > a > img');

Unfortunately it also generates an empty div <div></div> before every <a href. It's clearly visible using Firebug. Without that particular piece of code the page is working perfectly fine too, but I want the arrows to show up on mouseover.

Please find the beta page on http://beta.beautifullalaland.com/scrolltest4.html and check the code (look for <!-- script inserts <div> before a href -->). A textbox with 2 links is at the very end of the gallery.

[Pris]

Test page is now here.
To overcome another quirk with automatic inserted code I put the first 2 text blocks into *yikes* tables. The tabled blocks no longer break in Firefox 3.6.3 (Mac), but still do in Safari 4.0.4.

Curiouser and curiouser…

[Declan1991]

Admittedly I never use jQuery, but from what I know of it, the code does exactly what it's supposed to.

$('<div></div>').insertBefore('ul#gallery > li:even a');

I may be wrong, but I think that that code inserts an empty div before every link in the even li's.

I would suspect that the background of that "empty" div is being changed to the arrow, hence the need for it.

[Pris]

Admittedly I never use jQuery, but from what I know of it, the code does exactly what it's supposed to.

$('<div></div>').insertBefore('ul#gallery > li:even a');

I may be wrong, but I think that that code inserts an empty div before every link in the even li's.

Yes, what is does is that what is advertised. The problem though is, is that there's should not be an empty <div> popping up before a hyperlink in the text.

Any idea if there's a way to hack this behaviour?

[Declan1991]

The problem though is, is that there's should not be an empty <div> popping up before a hyperlink in the text.

Obviously the empty div is there for a reason, evidenced by the fact that it stops working when it's removed. Without seeing it, I would presume it's as a holder for the image. If you want the image, keep the div.