Question

Intended outcome:

<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?

Answer 1

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