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>

Я установил jsfiddle here. Есть ли способ достичь того, что я хочу?

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

Это, кажется, работает немного лучше :)

var curText = $('li a').text(); 

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

http://jsfiddle.net/zqUmL/5/

Answer 4

там что-то не так с делать это?

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