Converting String to HTML - string to " a href" element

Question

Hello I am having some trouble getting some HTML links to add to my HTML page. I have tried searching around but nothing has helped thus far.

My page will initially load a snippet:

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

Which appears like Roster: in the View

Right now my snippet has been modified to add names:

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

Which will update my View to Roster: John, Frank, Susan, ect..

However, I am trying to now add <a href> tag's around each person and turn them all into actual links. My attempt looks like this

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

which displays as

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

I understand why this occurring since I am setting actual text/strings, but is there a way to convert this string into HTML elements? I have tried a few $.parseHTML code snippets that I found from Googling but I must be implementing them all wrong.. :(

Any help appreciated, Thank you!

Answer 1

Well, solution is quite obvious

Just replace

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

With:

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

Because if you use it as a text then it will treat it as the text and if you write html then it will treat it as a html