JQuery - How to add a single html tag to some html?

jquery html prepend
Keith Donegan picture Keith Donegan · May 11, 2010 · Viewed 10.4k times · Source

I want to insert just a single <span> before the text below (right before LINK): 

<li><a href="">LINK</a></li>

So, the above becomes

<li><a href=""><span>LINK</a></li>

Here is my JQuery Code: 

$('#mainnav li a').prepend('<span>');

When I view the code in firebug after, I see <span></span>, how do I just get the opening span tag and not the closing tag?

Answer

cletus picture cletus · May 11, 2010

Firstly, what you want is malformed HTML. jQuery is going to make it hard if not impossible to create that. I would suggest doing it in a single step rather than multiple. Try:

$("li > a").each(function() {
  $(this).contents().wrapAll("<span>");
});

Input:

<ul>
  <li><a href="...">testing</a></li>
  <li><a href="...">rich <b>content</b> with <i>inner tags</i></a></li>
</ul>

Output:

<ul>
  <li><a href="..."><span>testing</span></a></li>
  <li><a href="..."><span>rich <b>content</b> with <i>inner tags</i></span></a></li> 
</ul>

Related questions

How to prepend a tr to after first tr at a table?

Possible Duplicate: Inserting new table row after the first table row using JQuery I have populated a tr for my table and I want to prepend it after the firts tr. I use this: $('#myTable').prepend($tr); As usual, …

Read More
jQuery Prepend before an element

I have a html structure like this/ <li id="1"></li> <li id="2"></li> <li id="3"></li> <li id="comment-box"></li> now i wanna prepend &…

Read More
jQuery move node out of its parent

I have this code: <ul class="list"> <li> <a href="#" > <img src="IMAGE" /> SOME TEXT </a> </li> <li> <a href="#" > <img src="ANOTHER …

Read More