I'm trying to render some HTML on the fly in my website without success. I've tried using jQuery's .html() function as below:

My html

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

My JQuery

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

The result is

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

Is there a way to make the browser render that result on the fly so it reflects the specific styles set on the text?

I'm trying to render some HTML on the fly in my website without success. I've tried using jQuery's .html() function as below:

My html

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

My JQuery

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

The result is

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

Is there a way to make the browser render that result on the fly so it reflects the specific styles set on the text?

• javascript
• jquery
• html

• You are missing a single quote on your last jQuery line – elementzero23 Commented Jan 20, 2017 at 8:10
• Thanks elementzero, I've corrected the error now – alopez02 Commented Jan 20, 2017 at 8:12

4 Answers 4

Decode the content by creating a temporary element.

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>

Or you need to use a string which contains unescaped symbols.

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>

You're on the right track. You need to differentiate between single and double quotes when creating a string. You're closing your string by adding double quotes inside double quotes.

Use the var below.

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

Fiddle for example: https://jsfiddle.net/acr2xg6u/

Change your jQuery to

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

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

Parsing problem from what I can tell.

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

You cannot create strings like that. If you are inside one, you must use the other:

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

Here's corrected code:

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