javascript - Converting String to HTML - string to "a href" element - Stack Overflow

admin管理员组

文章数量:1290191

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, etc..

However, I am trying to now add <a href> tags 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>, etc..

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.

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, etc..

However, I am trying to now add <a href> tags 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>, etc..

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.

• javascript
• jquery
• html
• href

Share Improve this question Follow edited Dec 26, 2023 at 22:05 halfer 20.5k1919 gold badges109109 silver badges202202 bronze badges asked Jul 9, 2014 at 15:51 AustinAustin 3,0802323 gold badges6464 silver badges102102 bronze badges 4

• 13 replace $("#teamRoster").text(rosterListings); with $("#teamRoster").html(rosterListings); – Just code Commented Jul 9, 2014 at 15:54
• 1 @Justcode you should add that as an answer. – Rory McCrossan Commented Jul 9, 2014 at 15:58
• @Justcode Thank you! Had no idea it was that simple! If you add that as an answer I shall mark it! – Austin Commented Jul 9, 2014 at 16:02
• 1 ok i am adding it as an answer – Just code Commented Jul 10, 2014 at 3:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

The problem is that you're using .text(), which will insert only text into the span, as seen here.

You need to use .html() if you want what is inserted to actually render as HTML.

So, try this:

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

Demo

Also note that the way you've set up your for loop causes an extra ma to be placed at the end of the list; I've fixed that here by checking whether it's the last element:

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

As Just code points out, you want to use the html method, not the text method. html() is jQuery's wrapper for innerHTML, which injects the string as html.

Here is a jsFiddle showing the difference:

http://jsfiddle/89nxt/

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

本文标签： javascriptConverting String to HTMLstring to quota hrefquot elementStack Overflow