Используйте JQuery для создания якоря - PullRequest
Новая
       1

Используйте JQuery для создания якоря

16 голосов
/ 16 февраля 2012

Я хочу использовать jquery для построения HTML следующим образом: 

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

Это кажется простым, но я не могу понять, как включить теги HTML как часть моего текста привязки.

Если я использую что-то вроде: 

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

тогда теги span будут экранированы.

Ответы [ 5 ]

31 голосов
/ 16 февраля 2012

Есть несколько способов сделать это, включая (но не ограничиваясь): 

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

Обратите внимание, что .html() заменяет любое существующее содержимое, а .append() добавляет в конец. Итак, учитывая, что в вашем примере у вас есть два элемента span, вы можете создавать их независимо и добавлять их по одному: 

$('<a href="#"></a>').append('<span class="play"></span>')
                     .append('<span class="trackName">Track Name</span>');
6 голосов
/ 16 февраля 2012

Отбросьте внутренний конструктор jQuery: 

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

jsFiddle .

или, если вы хотите код в виде HTML в ссылке: 

$("<a />", { html: '<SPAN class="play" /> Track Name' });
3 голосов
/ 17 ноября 2015 
var link = $("<a>");
    link.attr("href","http://www.google.com");
    link.attr("title","Google.com");
    link.text("Google");
    link.addClass("link");
0 голосов
/ 17 февраля 2012

Это то, с чем я в конце концов пошел: 

$('<a>', { className: 'trackName', href: contentPath + 'tracks/' + t.fileName } )
     .append('<span class="play" />')
     .append('<span class="trackName"></span>')
          .append(t.trackName)
0 голосов
/ 16 февраля 2012 
//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/

...