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 = "&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)

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?

You are missing a single quote on your last jQuery line

elementzero23
– elementzero23

2017-01-20 08:10:13 +00:00
Commented Jan 20, 2017 at 8:10 — elementzero23
– elementzero23, Commented Jan 20, 2017 at 8:10
Thanks elementzero, I've corrected the error now

alopez02
– alopez02

2017-01-20 08:12:06 +00:00
Commented Jan 20, 2017 at 8:12 — alopez02
– alopez02, Commented Jan 20, 2017 at 8:12

Pranav C Balan · Accepted Answer · 2017-01-20 08:35:19Z

9

Decode the content by creating a temporary element.

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>

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>

edited Jan 20, 2017 at 8:35

answered Jan 20, 2017 at 8:11

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

alopez02 Over a year ago

Pranav Thanks! This works fantastic. Although not quite sure why this works. If you have a couple of spare minutes could you give me a hint?

Pranav C Balan Over a year ago

@Andrew : where < stands for < which is using to escape the symbol .... to define as an html tag you should use <p> instead of <p>

Pranav C Balan Over a year ago

@Andrew : actually what I'm doing in the code is , 1. creating an element with the given string as html content 2. getting the text content from the created element wich is the decoded text... 3. setting the fetched text as html content

alopez02 Over a year ago

Thanks a lot Pranav. Now it's quite clear to me the issue and the solution. Sounds so simple in hindsight!

Gezzasa · Accepted Answer · 2017-01-20 08:17:30Z

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/

answered Jan 20, 2017 at 8:17

Gezzasa

1,4618 silver badges18 bronze badges

4 Comments

alopez02 Over a year ago

I see Gezzasa for sure an issue with the quotes. However, that's exactly the output I get from the backend so I was looking for a solution that works directly with the original string. Pranav approach bellow did work well. THanks

Gezzasa Over a year ago

@Andrew glad his solution worked for you. His string starts with double quotes though where yours starts with single, if that is the exact string that you're receiving from the back end.

alopez02 Over a year ago

Gezzasa I'm getting so confused with the symbols right now. Sorry just a Newbie here. I see what you mean! You are right as well, changing the outer single quotes to double quotes and the inner one to single ones resolves the issue. Thanks for pointing this out again!

Gezzasa Over a year ago

@Andrew not a problem. You'll learn something new every day while developing. It's as much exciting as it is infuriating. Happy coding :)

elementzero23 · Accepted Answer · 2017-01-20 08:12:52Z

1

Change your jQuery to

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

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

answered Jan 20, 2017 at 8:12

elementzero23

1,4493 gold badges20 silver badges39 bronze badges

Comments

Joshua · Accepted Answer · 2017-01-20 08:13:10Z

0

Parsing problem from what I can tell.

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

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:

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

answered Jan 20, 2017 at 8:13

Joshua

6497 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related