如何使用Javascript或jQuery在div中呈現html代碼

Question

我試圖在我的網站中即時渲染一些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>

有沒有一種方法可以使瀏覽器即時呈現結果，從而反映文本上設置的特定樣式？

Answer 1

通過創建一個臨時元素來解碼內容。

 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() ) 

 <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> 

Answer 2

您走在正確的軌道上。 創建字符串時，需要區分單引號和雙引號。 通過在雙引號內添加雙引號來關閉字符串。

使用下面的變量。

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

從我所知道的解析問題。

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

您不能創建這樣的字符串。 如果您位於其中一個，則必須使用另一個：

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

這是更正的代碼：

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