JavaScript模板：将每个单词包装在HTML元素的字符串中

Question

I'm trying to modify a JavaScript template such that each of the words in a particular string are wrapped in <span> elements. I have:

<% var tagString = "Happy Sad Up Down", tags = tagString.split(" "), wrappedTags = ""; %>
<% for (var i = 0; i < tags.length; i++) { %>
    <% wrappedTags += "<span>" + tags[i] + "</span>"; %>
<% } %>
<p><%=wrappedTags%></p>

The problem is that this outputs the "<span>" and "</span>" as text, not HTML, so I end up with the following text being displayed on the page:

<span>Happy</span><span>Sad</span><span>Up</span><span>Down</span>

Is there any way within this syntax to output the wrapping <span> tags as HTML?

---

UPDATE: with regular (non-template) syntax, it works if I simply write wrappedTags to the page: http://jsfiddle.net/4QtUd/ . However, I can't figure out the equivalent way to do this within the template syntax.

Answer 1

You could do something like this, outputting it directly within the loop.

<% var tagString = "Happy Sad Up Down", tags = tagString.split(" "); %>
<p>
<% for (var i = 0; i < tags.length; i++) { %>
    <span><%= tags[i] %></span>
<% } %>
</p>

Answer 2

Try replacing your < and > with HTML entities. http://www.w3schools.com/html/html_entities.asp

So basically: < -> &lt; and > -> >