Intended oute:

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

Starting html:

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

I've attempted to use .prepend() with .append() and separately .wrapInner() but neither give the desired output.

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

Outputs:

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

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

Outputs:

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

Is there a way to achieve what I want?

Intended oute:

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

Starting html:

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

I've attempted to use .prepend() with .append() and separately .wrapInner() but neither give the desired output.

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

Outputs:

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

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

Outputs:

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

Is there a way to achieve what I want?

• javascript
• jquery
• append

4 Answers 4

check my jsFiddle here. I used like below,

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

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

If you want in 1 line, then use as below

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

DEMO here

Something like this should work:

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

This seems to work a bit better :)

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

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

http://jsfiddle/zqUmL/5/

Is there something wrong with doing this?

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