How to render string as HTML through a JS web widget?

Question

I have a Rails backend which sends strings like

<p>Hello world</p>

etc.

But no matter what I do

$('div#target').after(...) or $('div#target').html(...)

The string remains sanitized. How can I make it into valid HTML?

Note: on my client I only have a <script> tag

Code bit that sends the string:

function main() {
  jQuery(document).ready(function($){
    var body = "<%= @body %>";
    $('script#parentdiv').after("<div class='parent'></div>");
    $('.parent').html(body);
  });

Can you show the code that sends the string – Laurens Dec 22 '15 at 10:38 — Laurens, Dec 22 '15 at 10:38
You may need to call html_safe on the string getting sent. – Joeman29 Dec 22 '15 at 10:40 — Joeman29, Dec 22 '15 at 10:40

score 5 · Accepted Answer · answered Dec 22 '15 at 10:40

5

var body = "<%= @body %>";

needs to be

var body = "<%= @body.html_safe %>";

answered Dec 22 '15 at 10:40

Joeman29

712
5
14

score 2 · Answer 2 · edited May 23 '17 at 12:15

If you specifically wish to use jQuery then

  var str = "hello, <b>my name is</b> jQuery.",
  html = $.parseHTML( str ), 
  // Append the parsed HTML
  $("#anyDomElement").append( html );`

This is straight from jQuery docs: http://api.jquery.com/jquery.parsehtml/

Otherwise this can also be done through native easily Creating a new DOM element from an HTML string using built-in DOM methods or prototype

Any string needs to be parsed and created as nodes of DOM to be understood by browser.

How to render string as HTML through a JS web widget?

2 Answers2