如何在通过 ajax 插入数据时阻止 jquery 删除子元素

Question

我正在使用以下代码将数据插入到 html 结构中，但仅显示以下代码之一。在我看来，当我通过 Ajax 插入数据时，子元素会被删除。怎么做才能不需要更改结构？

JS

<script type="text/javascript">
$(document).ready(function(){
    $("#list").html('<div id="loader"><i class="fa fa-refresh fa-fw fa-5x fa-spin" aria-hidden="true"></i><br>Waiting...</div>');
    setInterval(function(){
        $.ajax({
               type: "GET",
               url: "generate_list.php",
               dataType:"json",
               cache: false,
               success: function(result){
                     $('#list').html(result.heading);
                     $('#list ul').html(result.list);
               }
        });
    }, 1000);
});
</script>

HTML

<div id="list">
    <ul>
    </ul>
</div>

PHP 片段

if($count > 0){
    echo json_encode(array('heading' => '<div id="found">Here is all!</div>', 'list' => $thelist));
}
else{
    echo json_encode(array('heading' => '<div id="empty_storage"><img src="icon.png"><br>Its lonely here!</div>', 'list' => $thelist));
}

Answer 1

使用 .append() 而不是 .html() 以便附加内容而不是覆盖：

  $.ajax({
           type: "GET",
           url: "generate_list.php",
           dataType:"json",
           cache: false,
           success: function(result){
                 $('#list').html(result.heading); // use html here
                 $( "<ul></ul>" ).appendTo( "#list" ); // create ul element in #list
                 $('#list').find("ul").html(result.list); // add list into ul
           }
    });

Answer 2

尝试附加 html 而不是替换 html:

$('#list').append(result.heading);
$('#list').find("ul").html(result.list);

Answer 3

尝试以下操作：

<script type="text/javascript">
$(document).ready(function(){
    var list = $('#list');
    list.append('<div id="loader"><i class="fa fa-refresh fa-fw fa-5x fa-spin" aria-hidden="true"></i><br>Waiting...</div>');
    setInterval(function(){
        $.ajax({
               type: "GET",
               url: "generate_list.php",
               dataType:"json",
               cache: false,
               success: function(result){
                     list.children('div').not('.loader').remove();
                     $(result.heading).insertAfter('.loader');
                     list.find('ul').empty().append(result.list);
                     //if result.list is a array you need to use a loop to append each value to the list
                     //$.each(result.list,function(i,c){list.find('ul').append(v);})
               }
        });
    }, 1000);
});
</script>

Answer 4

如上所述，您应该使用：

$('#list').append(result.heading);

Html(something) 会将所选标签内的所有内容替换为您作为参数传递的内容（当传递参数时，它基本上是一个 .innerHTML="something";），而 append 只需将其添加到当前内容。

.html(something) 进行替换。 .append(someting) 待补充。

祝你好运。

Answer 5

ajax 回调不是删除你的 html 的原因（尽管如果它仍然存在的话它会），你的第一行：

$("#list").html('<div id="loader"><i class="fa fa-refresh fa-fw fa-5x fa-spin" aria-hidden="true"></i><br>Waiting...</div>');

实际上是从您的 #list 元素中删除您的 <ul>... 如果您将其添加回来，这很好。假设 results.heading 是一个 h1 标签（或类似的）并且 results.list 是一堆 li 元素，您的 ajax 回调可能如下所示：

$('#list').html(result.heading);
$('#list').append($('<ul>').append(result.list));

此外：如果您希望加载器在每个间隔之间显示...您可以这样做（或类似的操作，具体取决于它的外观 - 这会将加载器图标放在列表的底部，而列表是正在更新。):

$(document).ready(function(){
    var $list = $('#list');
    setInterval(function(){
        $list.append('<div id="loader"><i class="fa fa-refresh fa-fw fa-5x fa-spin" aria-hidden="true"></i><br>Waiting...</div>');
        $.ajax({
               type: "GET",
               url: "generate_list.php",
               dataType:"json",
               cache: false,
               success: function(result){
                     $list.html(result.heading);
                     $list.append($('<ul>').append(result.list));
               }
        });
    }, 1000);
});

如何在通过 ajax 插入数据时阻止 jquery 删除子元素

How to stop jquery from removing child elements when inserting data via ajax

javascript

ajax

jquery

parent-child