Question

我有以下数据：

<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

我想从jquery动态追加到我的div。我该怎么做？

这是我正在做的事情：

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');

            }
    });

这里table.Description返回我在顶部提到的字符串，.mainGrid是我想要追加数据的div的类。我的上面的代码不会将字符串呈现为Html。我该怎么做？

Answer 1

你可以让jQuery为你编译它，然后追加它。

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/

Answer 2

虽然你这样做的方式被认为是一种不好的做法，因为过多的html文本连接都会有不好的代码。您必须通过获取nodeValue来取消它并使其看起来像html 根据这一个：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);

如何动态呈现html？

2 个答案: