I want to turn something like <sup>1</sup> into <sup><a href="..." class="...">1</a></sup> I figured the easist way would be to prepend <a href....> and append </a> but the append is not ing after the content (1)...

I know I could do a second .each() and store the 1 as a variable and then do .html(), but I figure that's not best practice since it involves another loop.

Thanks!!

/

I want to turn something like <sup>1</sup> into <sup><a href="..." class="...">1</a></sup> I figured the easist way would be to prepend <a href....> and append </a> but the append is not ing after the content (1)...

I know I could do a second .each() and store the 1 as a variable and then do .html(), but I figure that's not best practice since it involves another loop.

Thanks!!

http://jsfiddle/pqzL4/

• javascript
• jquery
• append

5 Answers 5

@Daff's answer should solve your problem. The reason it doesn't work is because as soon as you do:

$(this).prev(".article").find("sup").prepend("<a href=\"#references" + (i + 1) + "\" class=\"references\">");

It gets added immediately. Since an unclosed tag is invalid, the browser will "correct" it by closing the tag for you.

Then you try to add a close tag to the end, which is invalid without an open tag so the browser ignores it.

I think you might want to look a jQuery wrapInner.

$('sup').wrapInner('<a href="#"></a>');

Which will wrap the text of any sup with a link.

You cannot append or prepend HTML fragments; you can only work with plete tags.

You're looking for wrap.

Description: Wrap an HTML structure around each element in the set of matched elements.

I think what you're looking for is "wrapInner()". It takes the contents of one element and wraps it with an element you pass in. Something along the lines of

$('sup').wrapInner('<a href...></a>') 

Try this:

$(this).prev(".article").find("sup").append('<a>' + $(this).prev(".article").find("sup").text() + '</a>');