jquery append / prepend / wrapInner？

Question

预期结果：

<li><a><span class="icon"></span><span class="text">Link Text</span></a></li>

启动html：

<li><a>Link Text</a></li>

我尝试将.prepend()与.append()和.wrapInner()分开使用，但均未提供所需的输出。

$('li a').wrapInner("<span class='icon'></span><span class='text'></span>");

输出：

<li><a><span class="icon">Link Text</span></a></li>

$('li a').prepend("<span class='icon'></span><span class='text'>");
$('li a').append("</span>");

输出：

<li><a><span class="icon"></span><span class='text'></span>Link Text</a></li>

有没有办法达到我想要的目的？

Answer 1

在这里查看我的jsFiddle。我用过如下，

$('li a').wrapInner("<span class='text'></span>");

$('li a').prepend("<span class='icon'></span>");

如果您想要1行，请按以下方式使用

$('li a').wrapInner("<span class='text'></span>").prepend("<span class='icon'></span>");

DEMO 此处

Answer 2

这样的事情应该有效：

$('li a').html('<span class="icon"></span><span class="text">' + $('li a').html() + '</span>');

Answer 3

这样做有什么问题吗？

text = $('li a').html();
$('li a').html("<span class='icon'></span><span class='text'>"+text+"</span>");