CODEWITHSUNDEEP
jqueryanchor
Eric
Eric

Reputation: 364

Use JQuery to build an anchor

I want to use jquery to build HTML like this:

<li><a href="#"><span class="play"></span><span class="trackName">Track Name</span></a></li>

It seems simple but I can't figure it out how to include HTML tags as part of my anchor text.

If I use something like:

$("<a />", { text: $('<SPAN class="play" />') + "Track Name" })

then the span tags get escaped.

Upvotes: 18

Views: 33593

Answers (5)

Vicky
Vicky

Reputation: 9575

var link = $("<a>");
    link.attr("href","http://www.google.com");
    link.attr("title","Google.com");
    link.text("Google");
    link.addClass("link");

Upvotes: 7

alex
alex

Reputation: 490667

Drop the internal jQuery constructor:

$("<a />", { text: '<SPAN class="play" /> Track Name' });

jsFiddle.

or, if you want the code as HTML in the link:

$("<a />", { html: '<SPAN class="play" /> Track Name' });

Upvotes: 6

Gabo Esquivel
Gabo Esquivel

Reputation: 4012

//overwrites the innerHTML of all anchors *selector must be changed to more specific
$('a').html('<span class="play"></span><span class="trackName">Track Name</span>');

//wraps existing text and prepends the new span
$('a').wrapInner('<span class="trackName">')
    .prepend('<span class="play"></span>');

http://jsfiddle.net/gaboesquivel/f2dcN/3/

Upvotes: 0

Eric
Eric

Reputation: 364

This is what I eventually went with:

$('<a>', { className: 'trackName', href: contentPath + 'tracks/' + t.fileName } )
     .append('<span class="play" />')
     .append('<span class="trackName"></span>')
          .append(t.trackName)

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150080

There are several ways to do it, including (but not limited to):

// one big string
$('<a href="#"><span class="play"></span><span class="trackName">Track Name</span></a>')

// create <a> then append() the span
$('<a></a>').attr("href","#")
            .append('<span class="play"></span><span class="trackName">Track Name</span>');

// create <a> then set all of its contents with html()
$('<a></a>').attr("href","#")
            .html('<span class="play"></span><span class="trackName">Track Name</span>');

// append spans created earlier:
var spans = $('<span class="play"></span><span class="trackName">Track Name</span>');
var a = $('<a></a>').append(spans);

Note that .html() replaces any and all existing contents, while .append() adds to the end. So given that you have two span elements in your example you could create those independently and append them one at a time:

$('<a href="#"></a>').append('<span class="play"></span>')
                     .append('<span class="trackName">Track Name</span>');

Upvotes: 32

Related Questions