如何使用Javascript或jQuery在div中呈现html代码

我试图在我的网站上动态呈现一些HTML而没有成功.我尝试过使用jQuery的.html()函数,如下所示：

我的HTML

<div id='open_ender_output'></div>

我的JQuery

var openEnderContent = "<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>"
//openEnderContent comes from my backend
$('#open_ender_output').html(openEnderContent)

结果是

<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>

有没有办法让浏览器动态渲染结果,以便它反映文本上设置的特定样式？

解决方法:

通过创建临时元素来解码内容.

var openEnderContent = '<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>';

$('#open_ender_output').html(
  // create an element where the html content as the string
  $('<div/>', {
    html: openEnderContent
  // get text content from element for decoded text  
  }).text()
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='open_ender_output'></div>

或者您需要使用包含未转义符号的字符串.

var openEnderContent = '<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>';

$('#open_ender_output').append(openEnderContent);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='open_ender_output'></div>