Ajax更新时不渲染返回的HTML标签，文本原样输出如何解决？

问题原因 #

• jQuery 提供的 text() 方法仅支持插入纯文本内容，会自动对所有HTML标签做转义处理，因此你后端返回的<span>标签会被当做普通字符串直接展示，不会被浏览器解析为带样式的元素。
• 现有代码还存在DOM选择器不匹配的问题：代码中选取的是ID为totalprofit的元素，但你页面上用于展示内容的p标签ID为total，即便内容渲染逻辑正确也无法正常更新展示。

修复方案 #

将text()方法替换为专门用于插入HTML内容的html()方法，同时修正DOM选择器的ID即可，修改后代码如下：

<script>
    function fun() {
          $.getJSON($SCRIPT_ROOT + '/_add_numbers', {}, function(data) {
            // 替换text为html，同时修正选择器ID
            $("#total").html(data.total);
          });
          return false;
    }
    var interval = setInterval(fun, 1000);
</script>

<p style="font-size:30px;text-align:center;" id="total"></p>

注意事项 #

• html()方法会直接解析插入的HTML内容，仅当你完全确认后端返回的内容是安全可控时使用，如果返回内容包含用户提交的未过滤的不可信内容，会存在XSS跨站脚本攻击风险。
• 如果需要兼顾安全性，你可以调整后端接口返回格式，直接返回对应数字值，由前端自行拼接带样式的<span>标签，避免直接插入后端返回的HTML字符串。

内容的提问来源于stack exchange，提问作者Rahul sharma