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

【问题标题】：Converting String to HTML - string to " a href" element将字符串转换为 HTML - 将字符串转换为“a href”元素
【发布时间】：2014-08-30 18:03:45
【问题描述】：

您好，我在获取一些 HTML 链接以添加到我的 HTML 页面时遇到了一些问题。我试过四处搜索，但到目前为止没有任何帮助。

我的页面最初会加载一个 sn-p：

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

在视图中显示为 Roster:

现在我的 sn-p 已被修改为添加名称：

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 代码 sn-ps，但我必须全部错误地实现它们.. :(

任何帮助表示赞赏，谢谢！

【问题讨论】：

用$("#teamRoster").html(rosterListings);替换$("#teamRoster").text(rosterListings);
@Justcode 您应该将其添加为答案。
@Justcode 谢谢！没想到这么简单！如果您将其添加为答案，我将对其进行标记！
好的，我将其添加为答案

标签： javascript jquery html href

【解决方案1】：

嗯，解决方法很明显

只需替换

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

与：

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

因为如果你把它当作文本使用，它就会把它当作文本，如果你写html，它就会把它当作一个html来处理

【讨论】：

【解决方案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>.";
}

【讨论】：

【解决方案3】：

正如 Just 代码指出的那样，您想使用 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>");

【讨论】：