I have a menu structure. With the following:

<ul id="quicktabs-ileti_im">
<li><a href="#qt-ileti_im-ui-tabs1" tabindex="0" class="">1</a></li>
<li><a href="#qt-ileti_im-ui-tabs1" tabindex="0" class="">2</a></li>
<li><a href="#qt-ileti_im-ui-tabs1" tabindex="0" class="">3</a></li>
</ul>

And want to:

<li><a href="#qt-ileti_im-ui-tabs1" tabindex="0" class=""><span>1</span></a></li>

My jQuery code:

$("#quicktabs-ileti_im ul li a").append('<span>');

But result:

<li><a href="#qt-ileti_im-ui-tabs1" tabindex="0" class="">1<span></span></a></li>

How can i fix it?

I have a menu structure. With the following:

<ul id="quicktabs-ileti_im">
<li><a href="#qt-ileti_im-ui-tabs1" tabindex="0" class="">1</a></li>
<li><a href="#qt-ileti_im-ui-tabs1" tabindex="0" class="">2</a></li>
<li><a href="#qt-ileti_im-ui-tabs1" tabindex="0" class="">3</a></li>
</ul>

And want to:

<li><a href="#qt-ileti_im-ui-tabs1" tabindex="0" class=""><span>1</span></a></li>

My jQuery code:

$("#quicktabs-ileti_im ul li a").append('<span>');

But result:

<li><a href="#qt-ileti_im-ui-tabs1" tabindex="0" class="">1<span></span></a></li>

How can i fix it?

• javascript
• jquery
• append

• where is your jquery code..?? – GautamD31 Commented May 8, 2013 at 12:38
• Sorry, updated my code. – Slaythern Aareonna Commented May 8, 2013 at 12:40

5 Answers 5

Try:

$("#quicktabs-ileti_im li a").wrapInner('<span>');

See here for documentation.

You want to use wrap or wrapInner

$("#quicktabs-ileti_im li a").contents().wrap("<span></span>");

or

$("#quicktabs-ileti_im li a").wrapInner("<span/>")

Examples:

• wrap
• wrapInner

You can do it by wrapInner() like this:

jsFiddle Live Demo

$('#quicktabs-ileti_im li a').wrapInner("<span></span>");

$("#quicktabs-ileti_im > li > a").contents().wrap("<span />");

Your selector is not correct.

ul has id= quicktabs-ileti_im. that means that the element can be referred with either of 2 ways.

$('#quicktabs-ileti_im')

$('ul#quicktabs-ileti_im')

that means your selector should be...

$('#quicktabs-ileti_im li a') or simply $('#quicktabs-ileti_im a').

As for the answer you can use either .wrapInner() or .wrap() JQuery functions.

$("#quicktabs-ileti_im a").wrapInner('<span />');

$("#quicktabs-ileti_im a").contents().wrap('<span />');