Add html Using JQuery

Question

I have this:

        <span class="mad">2</span> Stuff

</li>

I want this

            <a href="/My/Website"><span class="mad">2</span> Website</a>

    </li>

Can someone give me some jquery to do this? Also "/My/Website" has to be changed to something different for each li...is this possible?

It is all possible, but you are not clear on how it sill be different for each li — RichardTheKiwi
– RichardTheKiwi, Commented Feb 9, 2011 at 21:20

RichardTheKiwi · Accepted Answer · 2011-02-09 21:24:31Z

1

Using each, you can give each li span.mad a different website url

$("li span.mad").each(function(i,e) {
 $(e).html(
    "<a href='/My/Website/"+ (i+1) +"'>"+$(e).html()+"</a>");
});

http://jsfiddle.net/6EzDs/

(or using wrap)

$("li span.mad").each(function(i,e) {
 $(e).wrap("<a href='/My/Website/"+ (i+1) +"' />");
});

answered Feb 9, 2011 at 21:24

RichardTheKiwi

108k28 gold badges206 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nick LaMarca Over a year ago

I need to add the span tag first to the li...then do this process how do I add a new span tag and class to each li first?

RichardTheKiwi Over a year ago

@nick edit your question if it does not start with <li><span>.. That's my interpretation of what the starting point is.

mikerobi · Accepted Answer · 2011-02-09 21:20:23Z

1

Give each li a unique class name and use the wrapp function

$('span .class1').wrap('<a href="class1 url"/>')

answered Feb 9, 2011 at 21:20

mikerobi

21k5 gold badges49 silver badges43 bronze badges

Comments

Adam Rackis · Accepted Answer · 2011-02-09 21:20:39Z

1

$("span.mad").wrap("<a href='/My/Website' />");

Or, if you want to go by id instead of class name

$("#someSpanID").wrap("<a href='/My/Website' />");

answered Feb 9, 2011 at 21:20

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

2 Comments

Nick LaMarca Over a year ago

Can I iterate through the li's and add something different for '/My/Website'

Adam Rackis Over a year ago

Yes - see @cyberkiwi's answer below

Collectives™ on Stack Overflow

Add html Using JQuery

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related