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

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

<li><a h开发者_JAVA技巧ref="">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?

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>

I ran into an issue where I was using a 3rd party API that was using php curl to place flat HTML into my webpage. In the api HTML that was returned was some malformed span tags that were just killing my rendering in IE. I used Jquery's replaceWith() function to fix the issue. Heres an example:

Malformed HTML:(notice the unopened span tag)

<a class="aa_float_right aa_navlink" href="http:whatever">My Account</a></span> 

My solution:

$('.aa_navlink').replaceWith('<span class="test"><a class="aa_float_right aa_navlink" href="http:whatever">My Account</a>');

Resulting HTML:

<span class="test"><a class="aa_float_right aa_navlink" href="http:whatever">My Account</a></span>

BOOM we now have well formed HTML no thanks so crappy 3rd party API's (and I mean really crappy).

This fix was given to me from the developers at SaltWater Co.

I don't know why you want it but it can be done this way,

$('#mainnav li a').html(function(i,v){
   return '<span>' + v;
})

When you use prepend, you're not adding markup text to the page, you're adding elements to the page. Elements don't have "start" and "end" tags, elements are elements. If you want to wrap a bunch of elements in a span (I'm guessing that's what you want, if you want to insert the beginning of it in one place and the end of it in another), you need to add the span to the container and then move the elements into it.

For example, this moves all of the links out of the element foo and moves them into a span inside container:

var stuff;
var container;

stuff = $('#foo a');
span = $("<span style='background-color: yellow'>");
span.append(stuff);
$('#container').append(span);

Many jQuery methods are designed to automatically create elements from only half-written tags, like, "<span>" for a .prepend() will result in an entire span element being added to the DOM. Or, as you'll see it in Firebug, "<span></span>" inserted firstly in the anchor element.

I don't see why you'd want to create invalid HTML, but if you must, you can do it this way:

$("li > a").html("<span>"+$("li > a").html());

Or, as Reigel suggests, with an anonymous function to the .html() method (I wrote my answer rather quickly and, obviously, unthoughtfully):

$("li > a").html(function (idx, html) {
    return "<span>" + html;
});

Otherwise, it could seem that you want to wrap the contents of the anchor element in a span. In that case, you should instead use one of the jQuery wrapping methods:

$("li > a").wrap("<span>");

You're not meant to create both the starting element and the closing element yourself (when using jQuery).