Question

我有以下HTML代码：

<ul class="dropdown-menu dropdown-alerts">
    <li>
        <a href="#">
            <div>
                <i class="fa fa-comment fa-fw"></i> New Comment

                <span class="pull-right text-muted small">4 minutes ago</span>
            </div>
        </a>
    </li>
    <li class="divider"></li>
</ul>

在我的jquery代码中，我以特定的形式从ajax中获取数据：

[{
    "Content": "lorem Ipsum",
    "Date": "2015-10-21 19:00:00"
}, {
    "Content": "lorem Ipsum",
    "Date": "2015-10-21 19:00:00"
}, {
    "Content": "lorem Ipsum",
    "Date": "2015-10-21 19:00:00"
},
etc.]

我按如下方式获取它：

$.ajax({
    url: './fetchData.php',
    type: "POST",
    data: {
        mail: mail
    },
    dataType: 'text',
    success: function(ans) {    
        var data = JSON.parse(ans);

        $.each(data, function(i, v) {
            console.log(v.Date);
            console.log(v.Content);

        });
    });
    .
    .
    .
});

现在，我不想在控制台上编写它，而是想在<li>内创建几个<ul class="dropdown-menu dropdown-alerts">节点，其中包含内容。我怎么能这样做？

Answer 1

您可以使用append上的prepend（底部）/ $('ul.dropdown-alerts')（顶部）添加带有响应数据的li，如下所示：

$.each(data, function(i, v) {
    $('ul.dropdown-alerts').append('<li><a href="#"><div><i class="fa fa-comment fa-fw"></i>' + v.Content + '<span class="pull-right text-muted small">' + v.Date + '</span></div></a></li>');

    /* if you want to append divider li as well */
    $('ul.dropdown-alerts').append('<li class="divider"></li>');
});

Answer 2

像这样

$.each(data, function(i, v) {
var result = $('<li><a href="#"><div><i class="fa fa-comment fa-fw"></i>' + v.Content + '<span class="pull-right text-muted small">' + v.Date + '</span></div></a></li>');
$('div').html(result);    
        });

如何以特定格式将从ajax获取的文本追加到我的html代码中？

2 个答案: