Ввода пролета с изображением перед текстом элемента списка

Question

У меня есть структура HTML, который выглядит следующим образом:

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

Моей цель поставить срок, который выглядит, как это в передней части теге ссылки :

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

Какой самый лучший способ пойти об этом? Это CSS :before или метод jQuery/Zepto .before? Кроме того, правильный синтаксис в отношении того, как это сделать, будет полезен. Я боролся с этим.

Спасибо!

Answer 1

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

Проверить больше деталей из .insertBefore

Answer 2

Если вам нужно, что <span> будут созданы dynamically вы можете пойти на Jquery.before()

Вы можете найти информацию в следующей ссылке с exaples

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

Answer 3

Вот как это сделать с помощью Javascript. (Прочитано в FireBug для 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]) 

Помогает ли это? Или вы хотите сделать это в jQuery?

Источник информации here.