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

Share Improve this question Follow edited Apr 20, 2019 at 18:52 double-beep 5,5371919 gold badges4040 silver badges4949 bronze badges asked Jan 4, 2012 at 19:11 Mr Jonny WoodMr Jonny Wood 3,85455 gold badges3131 silver badges4242 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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>");