jQuery使用.html粘贴表中的Ajax数据

Question

我在将一些html粘贴到div中时遇到问题。 我想我知道自己在做错什么，但是我找不到解决方案。 我有一个空的div，称为“ allbrands”。 单击一个按钮后，该div充满了来自POST ajax调用的数据。 我做了一个循环遍历数据的循环，但是它不断替换html。 那么，如何在不替换每次内容的情况下粘贴此html表？

我的div：

<div id="allbrands">

</div>

我的Ajax：

<script type="text/javascript">
    $( document ).ready(function()
    {
        $('[name="getbrands"]').click(function (e){
            e.preventDefault();
            $.ajax({
                type: "GET",
                url: '/brands/all',
                success: function (data)
                {
                       for(var i = 0; i < data.length; i++) {
                           $('#allbrands').html('<h6>' + data[i] + '</h6><hr>');
                       }
                }
            });
        });
    });
</script>

数据填充如下：

Answer 1

更改此行：

$('#allbrands').html('<h6>' + data[i] + '</h6><hr>');

至

$('#allbrands').append('<h6>' + data[i] + '</h6><hr>');

然后再试一次。

说明： html()通过添加新内容来替换旧内容， append()保留旧内容并附加新内容。

Answer 2

问题出在你的循环中。 您将在每次迭代中覆盖div的值。 您需要附加值而不是覆盖它：

尝试这个：

for(var i = 0; i < data.length; i++) {
    $('#allbrands').append('<h6>' + data[i] + '</h6><hr>');
 }

Answer 3

请点击以下链接获取更多信息

http://api.jquery.com/append/

同时添加

$("#allbrands").append();