[ACCEPTED]-Use JQuery to build an anchor-anchor

Accepted answer
Score: 32

There are several ways to do it, including 6 (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 5 any and all existing contents, while .append() adds 4 to the end. So given that you have two span 3 elements in your example you could create 2 those independently and append them one 1 at a time:

$('<a href="#"></a>').append('<span class="play"></span>')
                     .append('<span class="trackName">Track Name</span>');
Score: 7
var link = $("<a>");
    link.attr("href","http://www.google.com");
    link.attr("title","Google.com");
    link.text("Google");
    link.addClass("link");

0

Score: 6

Drop the internal jQuery constructor:

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

jsFiddle.

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

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

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)

0

Score: 0
//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/

0

More Related questions