使用JQuery构建一个锚点

我想使用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标签就被转义了.

解决方法

有几种方法可以实现,包括(但不限于)：

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