jquery добавить / 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>");

Answer 4

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

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

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

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