Have Geek Brain

JQuery - How to add one html tag to some html?

I only want to insert one <span> in front of the below text (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 go through the code in firebug after I see <span></span>

how do I get just the span tag and not the closing tag?

+2


a source to share


5 answers


First, you need the wrong HTML. jQuery is going to make this difficult, if not impossible, to create this. I would suggest doing this in one step, not several. 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>
+6


a source


I got a problem when I was using a third party API that used php curl to post flat HTML on my web page. The HTML api that was returned had some invalid span tags that were just killing my rendering in IE. I used JWery's replaceWith () function to fix the problem. Here's an example:

Formatted HTML: (note the unprinted span tag)

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

My decision:

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


HTML result:

<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 third party API (and I mean really crappy).

This fix was given to me by the developers of SaltWater Co.

+3


a source


I don't know why you need this, but you can do it like this,

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


a source


When you use prepend

, you are not adding markup text to the page, you are adding elements to the page. Elements do not have "start" and "end" tags, elements are elements. If you want to wrap a bunch of elements in span

(I assume 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 a span to the container, and then move the elements into it.

For example, this moves all links out of the element foo

and moves them to the range inside container

:

var stuff;
var container;

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


a source


Many jQuery methods are designed to automatically create elements from only half-written tags, for example "<span>"

for .prepend () will add the entire span element to the DOM. Or, as you will see in Firebug, "<span></span>"

inserted into the binding element first.

I don't understand why you want to create invalid HTML, but if you need to, you can do it like this:

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

Or, as Reigel suggests, with an anonymous method function .html () (I wrote my answer pretty quickly and obviously unwise):

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

Otherwise, it may seem like you want to wrap the content of the anchor element in between. In this case, you should instead use one of the jQuery wrapper methods :

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

You don't have to create both the start element and the closing element yourself (when using jQuery).

0


a source






More articles:


All Articles