[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");

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)

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/

Source: stackoverflow.com

jQuery: Capture anchor href onclick and submit asynchronously

Auto-Scroll to next anchor at Mouse-wheel

jQuery create a with href attribute

How to add data to the anchor tag in HTML and access it using jQuery?

How to select anchor tag with specified class and rel?

ScrollTo function in AngularJS

AdminLTE Sidebar Active menu doesn't change dynamically

SVG Text-anchor top left

What's the right way to define an anchor tag in rails?

Get anchor part of URL in controller in Ruby on Rails

Cookie Warning

We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.