javascript - How to render html dynamically? - Stack Overflow

admin管理员组

文章数量:1326277

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?

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?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Oct 15, 2014 at 12:14 ArtiArti 3,0711111 gold badges7474 silver badges123123 bronze badges 7

• did you try doing $('.mainGrid').html(data); ? – BIU Commented Oct 15, 2014 at 12:19
• This is working for me, see jsfiddle/xj4xhfg7/6. You should check console error. – Bhushan Kawadkar Commented Oct 15, 2014 at 12:20
• @BhushanKawadkar I am getting data from webservice, table.description and table.name aren't the data I want to print – Arti Commented Oct 15, 2014 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 Commented Oct 15, 2014 at 12:25
• Yes It is working with simple text. – Arti Commented Oct 15, 2014 at 12:26

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

You can get jQuery to pile 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/c4z1nm7o/1/

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./a/3700369/986160

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

本文标签： javascriptHow to render html dynamicallyStack Overflow