Q:

JavaScript template: wrap each word in a string in an HTML element

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.

A:

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>

