js 字符串转html标签

Question

遇到一个问题:var str = "<span>hk</span>",这是一段字符串，
获取放在网页上显示也是一段字符串：<span>hk</span>，此时的<span></span>不是标签
怎么才能让<span></span>在网页上以标签方式显示呢?
右击查看htmlelement的时候，变成这样了:
<span>hk</span>
百度了，但是没起效，请大神指点

Answer 1

这个是你想要的：

var str = '<span>hk</span>';
var div = document.createElement('div');
div.innerHTML = str;
var span = div.childNodes[0];
var body = document.getElementsByTagName('body')[0];
body.appendChild(span);

原生方法。

Answer 2

document.body.innerHTML = '<span>hk</span>'

Answer 3

在这个页面顶部的地方举个栗子吧比如:

var str1 = "<span>111</span>";
var str2 = "<span>222</span>";
var str3 = "<script>alert('333')</script>";

document.getElementById('sideBookmark').innerHTML = str1; //原生js写法

$('#sideBookmark').html(str2); //jq写法

不过一般情况下要注意防xss注入，所以要对一些字符转义。比如你可以定义个函数

function escapeChars(str) {
    str = str.replace(/&/g, '&');
    str = str.replace(/</g, '&lt;');
    str = str.replace(/>/g, '&gt;');
    str = str.replace(/'/g, '&acute;');
    str = str.replace(/"/g, '&quot;');
    str = str.replace(/\|/g, '&brvbar;');
    return str;
}

$('#sideBookmark').html(escapeChars(str3));

Answer 4

用html写入,直接上代码了

var str = "<span>hk</span>";
var parent = $('body');
parent.html(str);

Answer 5

要看源码，我怀疑是<>这些符号被转义了，你看起来是<实际上源码是实体符号。
所以，你需要先html....decode()一下。

Answer 6

改一下html结构？
比如

<pre>
<span> some word.. </span>
</pre>

这样？
不然就只能做转义了