为什么用Javascript RegEx在文本周围包装标签会将标签显示为文本？

Question

我试图在一组链接中的某些单词周围包装标签，但标签正在呈现为文本。为什么这样，我该怎么做才能让它们呈现为HTML？

我有以下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>'
    );
});

以下是HTML的示例：

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

我在浏览器中的结果如下：

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

...但显然我希望这些跨度是功能元素，而不是在浏览器中显示为文本。

我做错了什么？

Answer 1

您必须自己创建DOM节点，这很乏味，或者使用innerHTML，它将被解析并转换为DOM子树：

$('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>'
    );
});