How can I render html code in a div using Javascript or jQuery

Question

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?

Answer 1

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>

Answer 2

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/