javascript - 在列表项的文本之前放置带有图像的跨度

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

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.

Answer 3

如果您需要<span>生成它，dynamically您可以选择Jquery .before()

您可以在以下链接中找到有关示例的信息

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