JavaScript generates empty div

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:

Code:

---

        $('<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.

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…

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

Code:

---

$('<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.

Quote:

---

Originally Posted by Declan1991

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

Code:

---

$('<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?

Quote:

---

Originally Posted by Pris

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.