javascript - appendchild 中的上标 html 标记

Question

我的 js 文件在前端导出包含上标标记的文本。问题是在浏览器上<sup>和®没有呈现，而是将标签本身显示为文本。有什么解决办法吗？谢谢！

var rName="Something<sup>&reg;</sup>";
var rURL="http://www.google.com";
var rAA=1;

function addResult(rName, rURL, rAA)
    {
        var node=document.createElement("li");
        var linkNode=document.createElement("a");

        node.setAttribute("id", rAA);
        node.setAttribute("class", "searchListing");
        node.setAttribute("onclick", "window.open('"+rURL+"','_self');");


        linkNode.setAttribute("href", rURL);
        linkNode.setAttribute("target", "_self");



        var textnode=document.createTextNode(rName);

        node.appendChild(textnode);

        document.getElementById("search_list_results").appendChild(node);
        document.getElementById(rAA).appendChild(linkNode);
    }   

Answer 1

根据定义，文本节点不包含 HTML，因此任何特殊的 HTML 字符都将被转义并按字面​​意思打印。

您可以创建一个span元素并设置其innerHTML：

var spannode = document.createElement('span');
spannode.innerHTML = rName;
node.appendChild(spannode);