Putting a span with an image before the text of a list item

Question

I have an HTML structure that looks like this:

<li class="thing"><a href="#" class="my-link">Something</a></li>

My goal is to put a span that looks like this in front of the link tag:

<span class="my-span"></span>

What's the best way to go about doing this? Is it a CSS :before or a jQuery/Zepto .before method? Also, proper syntax as to how to do this would be helpful. I've been struggling with this.

Thanks!

Answer 1

$('<span class="my-span"></span>').insertBefore('.my-link');

Check more details from .insertBefore

Answer 2

If you need that <span> to be generated dynamically you may go for Jquery .before()

You may find for information in the following link with exaples

http://api.jquery.com/before/

Answer 3

Here's how to do it with Javascript. (Tried on FireBug for Firefox)

a = document.getElementsByClassName("my-link")
//Now a[0] will have your first link
b = document.createElement("span") //Your new span element
b.setAttribute("class","my-span")
a[0].parentElement.insertBefore(b,a[0])

Does this help? Or did you want to do it in jQuery?

Information source here.