How to render HTML in string with Javascript?

Question

I have the following javascript code:

var html =  '<div class="col-lg-4 col-references" idreference="'+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; cursor:pointer;" data-toggle="modal" data-target="#modalDel"></i><i class="glyphicon glyphicon-pencil editRefer" data-toggle="modal" data-target="#modalRefer" style="cursor:pointer;"></i></span><div id="contentRefer'+response+'">'+refer_summary+'</div><span id="nameRefer'+response+'">'+refer_name+'</span></div>';
$("#references").append(html);

When this code runs, the refer_summary variable actually contains a string which may contain HTML tags such as <b>, <i> etc., however, those tags are displayed on the page instead of rendering their behavior.

For example, on the page it would show <b> rather actually making the content bold.

How can I go about rendering the HTML tags when the value is appended?

In my Django template I use {% autoescape off %}{{content}}{% endautoescape %} so when I first load the page, the content is rendered correctly with bold etc. But how can I do the same thing when appending the html from javascript?

Thanks for the help!

Sounds like an XSS attack waiting to happen.

Robby Cornelissen
– Robby Cornelissen

2017-01-25 04:59:34 +00:00
Commented Jan 25, 2017 at 4:59 — Robby Cornelissen
– Robby Cornelissen, Commented Jan 25, 2017 at 4:59

Community · Accepted Answer · 2020-09-17 11:27:57Z

34

You can render HTML using document.write()

document.write('<html><body><h2>HTML</h2></body></html>');

But to append existing HTML string, you need to get the id of the node/tag under which you want to insert your HTML string.

There are two ways by which you can possibly achieve this:

Using DOM -

var tag_id = document.getElementById('tagid');
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode('html string'));

Using innerHTML -

var tag_id = document.getElementById('tagid');
tag_id.innerHTML = 'HTML string';

edited Sep 17, 2020 at 11:27

CommunityBot

11 silver badge

answered Jan 25, 2017 at 5:16

Shubham Sureka

4563 silver badges3 bronze badges

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

2 Comments

Timo Over a year ago

The advantage of 2 is that no new element/dom as with write and 1 is created. Seems like a pure solution.

Marcin Wojnarski Over a year ago

It should be added for clarity that in 1 and 2, any HTML markup contained in the 'html string' will in fact be parsed and converted to DOM nodes. So this is a way for growing the DOM, not just for inserting text strings.

Manoj Patidar · Accepted Answer · 2017-01-25 05:01:34Z

9

Use $.parseHTML before the append html like as

var html =  '<div class="col-lg-4 col-references" idreference="'+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; cursor:pointer;" data-toggle="modal" data-target="#modalDel"></i><i class="glyphicon glyphicon-pencil editRefer" data-toggle="modal" data-target="#modalRefer" style="cursor:pointer;"></i></span><div id="contentRefer'+response+'">'+refer_summary+'</div><span id="nameRefer'+response+'">'+refer_name+'</span></div>';
html = $.parseHTML( html);
$("#references").append(html);

answered Jan 25, 2017 at 5:01

Manoj Patidar

1,1712 gold badges11 silver badges29 bronze badges

1 Comment

Souza Over a year ago

The other approaches not worked for me in Outsystems, but this was perfect. Thanks.

weigel · Accepted Answer · 2018-08-08 08:22:13Z

5

You can use Javascript's document.createRange().createContextualFragment:

const frag = document.createRange().createContextualFragment('<div>One</div><div>Two</div>');
console.log(frag);

/*
  #document-fragment
    <div>One</div>
    <div>Two</div>
*/

https://davidwalsh.name/convert-html-stings-dom-nodes

answered Aug 8, 2018 at 8:22

weigel

981 silver badge6 bronze badges

Comments

Emad Armoun · Accepted Answer · 2021-05-20 03:15:54Z

3

If you want to do it in ReactJS, you can use "dangerouslySetInnerHTML" attribute, instead of "innerHTML" attribute.

As it allows the attackers to inject codes (XSS), it is named dangerous!

const myHtmlData = `
    <ul>
        <li>Item1<li>
        <li>Item2<li>
    </ul>`;
...
<div
    dangerouslySetInnerHTML={{
        __html: myHtmlData
}}>

answered May 20, 2021 at 3:15

Emad Armoun

2,1472 gold badges23 silver badges35 bronze badges

Comments

IteratioN7T · Accepted Answer · 2017-01-25 05:02:26Z

0

You need to assign a particular div an id and then process/change UI in the specific div accordingly.

Given here is an excellent explanation.

answered Jan 25, 2017 at 5:02

IteratioN7T

3578 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to render HTML in string with Javascript?

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related