Menu
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!
325
To render the html string in react, we can use the dangerouslySetInnerHTML attribute which is a react version of dom innerHTML property. The term dangerously is used here to notify you that it will be vulnerable to cross-site scripting attacks (XSS).
The render() method # var render = function (template, node) { // Codes goes here... }; This follows the same structure as React, where you pass in a template and the node to render it into. To render content, we'll use innerHTML , a property that let's you set the inner HTML of an element.
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:
var tag_id = document.getElementById('tagid'); var newNode = document.createElement('p'); newNode.appendChild(document.createTextNode('html string')); var tag_id = document.getElementById('tagid'); tag_id.innerHTML = 'HTML string'; 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); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With