How to render html dynamically?

Question

I have data like:

<p>50 Roses in a Heart Shape<span style="font-family: Arial, Helvetica, sans-serif; line-height: 15px;">; Make your recipient the princess of the day with this lovely and luxurious bouquet.<\/span><\/p>\u000d\u000a

which i want to append to my div dynamically from jquery. How do I do that?

Here is what I am doing:

var param = '{"CategoryId":72}';
    $.ajax({
            type:'POST',
            url : serviceUrl,
            dataType:"json",
            data:param,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success : function (msg) {

            $.each(msg, function(index, table) {
            var data=' <div class="ui-block-c">';
            data+=' <div class="ui-body ui-body-d">';
            data+=' <h4>'+table.Name+'</h4>';
            data+=' <p>';
            data+= table.Description;
            data+='</p>';
            data+=' <img src="img/pink coral roses.jpg" alt="" style="width:100%;">';
            data+=' <p>'+table.Price+'</p>';
            data+=' <button class="ui-btn ui-btn-inline">Add To Cart</button>';
            data+=' </div>';
            data+=' </div>';
            alert(data);
            $('.mainGrid').append(data);

      });
            },
            error : function (XMLHttpRequest, textStatus, errorThrown) {
                alert('Error in LoadLayout');

            }
    });

Here table.Description returns the string I mention on top and .mainGrid is the class of the div I want to append data to. My above code does not render the string as Html. How do I do that?

This is working for me, see http://jsfiddle.net/xj4xhfg7/6/. You should check console error. — Bhushan Kawadkar, Oct 15 '14 at 12:20
@BhushanKawadkar I am getting data from webservice, table.description and table.name aren't the data I want to print — Arti, Oct 15 '14 at 12:23
Okay, backup. Have you tried doing the append() with a simple piece of text in it? If that works, then your problem isn't with append(), it's with the data you've got. Try doing `$('.mainGrid').append("text");` and see if it works, that will let you isolate the problem. — BIU, Oct 15 '14 at 12:25
Yeah that i used as string because `table` variable is not available with me. But you can check in console log if there is any error because of `table` variable has all values then it should work as it is. — Bhushan Kawadkar, Oct 15 '14 at 12:26
are you sure your `table` variable holds what you think it does? If you do console.log(table) within the loop, does it print what it should? — BIU, Oct 15 '14 at 12:31

score 4 · Accepted Answer · answered Oct 15 '14 at 12:27

You can get jQuery to compile it for you, then append it.

var div = $('<div class="ui-block-c">');
var data = $('<div class="ui-body ui-body-d">');
data.append('<h4>' + table.Name + '</h4>');
var description = ($('<div>').append(table.Description)).text();
data.append(description);
data.append('<img src="img/pink coral roses.jpg" alt="" style="width:100%;">');
data.append('<p>' + table.Price + '</p>');
data.append('<button class="ui-btn ui-btn-inline">Add To Cart</button>');
div.append(data);
$('.mainGrid').append(div);

http://jsfiddle.net/c4z1nm7o/1/

score 1 · Answer 2 · edited May 23 '17 at 11:43

Although the way you are doing it is considered a bad practice as too much of text concatenation of html smells bad code. You have to unescape it and make it look like html by getting the nodeValue according to this one: https://stackoverflow.com/a/3700369/986160

var encoded = "&lt;span&gt;test&lt;/span&gt;"; // or your data
var div = document.createElement('div');
div.innerHTML = encoded;
var decoded = div.firstChild.nodeValue;
$('.mainGrid').append(decoded);

How to render html dynamically?

2 Answers2