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

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等

然而，我现在尝试添加每个人的<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>, 等等..

我知道这是因为我设置的是实际文本/字符串，但是否有一种方法可以将该字符串转换为HTML元素？我尝试了一些从谷歌搜索中找到的$.parseHTML代码片段，但我一定是实现得都不对.. :(

任何帮助都将不胜感激，谢谢！

- Austin

---

将$("#teamRoster").text(rosterListings);替换为$("#teamRoster").html(rosterListings);。 - Just code

@Justcode，你应该把它作为回答添加进去。 - Rory McCrossan

@Justcode 谢谢！我不知道它是那么简单的！如果你把它作为答案添加，我会标记它的！ - Austin

好的，我会将其翻译成中文。 - Just code

Answer 1

好的，解决方案非常明显

只需要替换掉原来的内容

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

使用：

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

因为如果你将其作为文本使用，它会将其视为文本；而如果你编写HTML，则会将其视为HTML。

- Just code

Answer 2

问题在于你正在使用 .text()，它只会将文本插入到 span 中，如 此处 所示。

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

因此，请尝试这样做：

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

演示

另外请注意，您设置的for循环会在列表末尾多出一个逗号；我通过检查它是否为最后一个元素在这里进行了修复：

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>.";
}

- AstroCB

Answer 3

正如 Just code 所指出的那样，您需要使用 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>");

- mtyson