使用 JQuery 构建锚点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9304342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use JQuery to build an anchor
提问by Eric
I want to use jquery to build HTML like this:
我想使用 jquery 来构建这样的 HTML：
<li><a href="#"><span class="play"></span><span class="trackName">Track Name</span></a></li>
It seems simple but I can't figure it out how to include HTML tags as part of my anchor text.
这看起来很简单，但我不知道如何将 HTML 标签包含在我的锚文本中。
If I use something like:
如果我使用类似的东西：
$("<a />", { text: $('<SPAN class="play" />') + "Track Name" })
then the span tags get escaped.
然后跨度标签被转义。
回答by nnnnnn
There are several ways to do it, including (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 any and all existing contents, while .append()adds to the end. So given that you have two span elements in your example you could create those independently and append them one at a time:
请注意，.html()替换任何和所有现有内容，同时.append()添加到末尾。因此，鉴于您的示例中有两个 span 元素，您可以独立创建它们并一次添加一个：
$('<a href="#"></a>').append('<span class="play"></span>')
.append('<span class="trackName">Track Name</span>');
回答by alex
回答by Vicky
var link = $("<a>");
link.attr("href","http://www.google.com");
link.attr("title","Google.com");
link.text("Google");
link.addClass("link");
回答by Eric
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)
回答by Gabo Esquivel
//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>');
