Question

您好我在将一些HTML链接添加到我的HTML页面时遇到了一些麻烦。我试过四处寻找，但到目前为止没有任何帮助。

我的网页最初会加载一个代码段：

<div style="display: inline-block; color: rgb(0, 255, 144)">Roster: </div>
<span id="teamRoster"></span>
<br />

在视图中显示为Roster:

现在我的代码片段已被修改为添加名称：

var rosterListings = "";
for (var i = 0; i < teamRoster.length; i++) {
    rosterListings = rosterListings + teamRoster[i] + ", ";
}
$("#teamRoster").text(rosterListings);

这会将我的观看次数更新为Roster: John, Frank, Susan, ect..

但是，我现在尝试在每个人周围添加<a href>标记，并将它们全部转换为实际链接。我的尝试看起来像这样

var rosterListings = "";
    for (var i = 0; i < teamRoster.length; i++) {
        rosterListings = rosterListings + " <a href='" + idList[i] + "'>" + teamRoster[i] + "</a>,";
    }
    $("#teamRoster").text(rosterListings);

显示为

Roster: <a href='#'>John</a>, <a href='#'>Frank</a>, ect..

我理解为什么会发生这种情况，因为我正在设置实际的文本/字符串，但有没有办法将此字符串转换为HTML元素？我尝试了一些我从谷歌搜索中找到的$.parseHTML代码片段，但我必须将它们全部错误地实现.. :(

任何帮助表示感谢，谢谢！

Answer 1

嗯，解决方案非常明显

只需替换

 $("#teamRoster").text(rosterListings);

使用：

$("#teamRoster").html(rosterListings);

因为如果你将它用作文本，那么它会将其视为文本，如果你编写html，那么它会将其视为html

Answer 2

问题是您正在使用.text()，它会将仅文本插入span，如here所示。

如果您希望插入的内容实际呈现为HTML，则需要使用.html()。

所以，试试这个：

$("#teamRoster").html(rosterListings);

Demo

另请注意，您设置for循环的方式会导致额外的逗号放在列表的末尾;我通过检查它是否是最后一个元素来修复here：

if (i !== teamRoster.length - 1) {
        rosterListings = rosterListings + " <a href='" + idList[i] + "'>" + teamRoster[i] + "</a>,";
} else {
        rosterListings = rosterListings + " and <a href='" + idList[i] + "'>" + teamRoster[i] + "</a>.";
}

Answer 3

正如代码指出的那样，您希望使用html方法，而不是text方法。 html()是jQuery的innerHTML包装器，它将字符串注入为html。

这是一个显示差异的jsFiddle：

http://jsfiddle.net/89nxt/

$("#teamRosterHtml").html("<a href='#'>John</a> <a href='#'>Frank</a>");
$("#teamRosterText").text("<a href='#'>John</a> <a href='#'>Frank</a>");

将String转换为HTML - 将字符串转换为“a href”元素

3 个答案: