Sử dụng JQuery để xây dựng một neo

Question

Tôi muốn sử dụng jquery để xây dựng HTML như thế này:

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

Có vẻ như đơn giản nhưng tôi không thể hình dung nó ra làm thế nào để bao gồm các thẻ HTML như là một phần của văn bản neo của tôi.

Nếu tôi sử dụng một cái gì đó như:

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

thì thẻ div được thoát.

Answer 1

Có một số cách để làm điều đó, bao gồm (nhưng không giới hạn):

// 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); 

Lưu ý rằng .html() thay thế bất kỳ và tất cả nội dung hiện có, trong khi .append() thêm vào cuối. Vì vậy, cho rằng bạn có hai yếu tố tuổi trong ví dụ của bạn, bạn có thể tạo ra những cách độc lập và gắn chúng cùng một lúc:

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

Answer 2

Thả các nhà xây dựng jQuery nội bộ:

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

jsFiddle.

hoặc, nếu bạn muốn mã dưới dạng HTML trong liên kết:

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

Answer 3

//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/

Answer 4

Đây là những gì tôi cuối cùng đã đi với:

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

Answer 5

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