Question

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

我的HTML

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

我的JQuery

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

结果是

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

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

Answer 1

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

＆＃13;

var openEnderContent = '&lt;p&gt;&lt;span style="color: #ff0000;"&gt;DDD&lt;/span&gt;!!!!!&lt;strong&gt;666666666666&lt;/strong&gt;&lt;/p&gt;';

$('#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()
)

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你走在正确的轨道上。创建字符串时，需要区分单引号和双引号。您通过在双引号内添加双引号来关闭字符串。

使用下面的var。

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

小提琴，例如：https://jsfiddle.net/acr2xg6u/

Answer 3

将您的jQuery更改为

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

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

Answer 4

从我所知道的解析问题。

"&lt;p&gt;&lt;span style="color: #ff0000;"&gt;DDD&lt;/span&gt;!!!!!&lt;strong&gt;666666666666&lt;/strong&gt;&lt;/p&gt;"

您无法创建类似的字符串。如果你在其中，你必须使用另一个：

"My name is 'Josh Crowe'"
'My name is "Josh Crowe"'

以下是更正后的代码：

"&lt;p&gt;&lt;span style='color: #ff0000;'&gt;DDD&lt;/span&gt;!!!!!&lt;strong&gt;666666666666&lt;/strong&gt;&lt;/p&gt;"

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

4 个答案: