使用JQuery构建锚点

Question

我想使用 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" })

然后``标签会被转义。

- Eric

Answer 1

有几种方法可以做到，包括但不限于：

// 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()则是在末尾添加内容。因此，在您的示例中有两个元素时，您可以分别创建它们，然后逐个添加：

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

- nnnnnn

---

你的最后一个例子是我选择的。 - Eric

Answer 2

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

- Vicky

Answer 3

取消内部jQuery构造函数:

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

jsFiddle。

或者，如果您想要将代码作为HTML嵌入链接中：

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

- alex

---

最奇怪的事情是光标不再是一个指针，因此您需要添加类似于 http://jsfiddle.net/f2dcN/41/ 的样式，或者在悬停在锚元素上时使用 CSS 强制将光标变成指针。 - patrick

Answer 4

这就是我最终选择的方案：

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

- Eric

Answer 5

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

- Gabo Esquivel