为什么使用Javascript RegEx将标签环绕在文本周围，将标签显示为文本？

Question

I'm attempting to wrap tags around certain words in a set of links, but the tags are rendering as text. Why is this, and what can I do to get them to render as HTML?

I have the following Javascript:

$('h3 a').each( function(){
    var text = this.firstChild.nodeValue;
    this.firstChild.nodeValue = text.replace(
        /(^Men\'s|Men’s|Women\'s|Women’s)/g,
        '<span class=\"title\">$1</span>'
    );
});

and here is a sample of the HTML:

<p><a href="products1.html">Women's Apparel</a></p>
<p><a href="products2.html">Men's Apparel</a></p>

My in-browser result is something like:

<span class="title">Women's</span> Apparel
<span class="title">Men's</span> Apparel

...but obviously I want those spans to be functional elements rather than displaying as text in the browser.

What am I doing wrong?

Answer 1

You have to either create the DOM nodes yourself, which is tedious, or work with innerHTML , which will get parsed and turned into a DOM subtree for you:

$('h3 a').each( function(){
    var text = this.firstChild.nodeValue;
    this.innerHTML = text.replace(
        /(^Men\'s|Men’s|Women\'s|Women’s)/g,
        '<span class=\"title\">$1</span>'
    );
});