最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to render html dynamically? - Stack Overflow

programmeradmin9浏览0评论

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:

&lt;p&gt;50 Roses in a Heart Shape&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif; line-height: 15px;&quot;&gt;; Make your recipient the princess of the day with this lovely and luxurious bouquet.&lt;\/span&gt;&lt;\/p&gt;\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?

Share Improve this question asked Oct 15, 2014 at 12:14 ArtiArti 3,07111 gold badges74 silver badges123 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

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 = "&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);
发布评论

评论列表(0)

  1. 暂无评论