我如何在同一个jQuery函数中使用两个追加？

Question

我有一个jQuery搜索功能，我想在开始显示标题为“搜索结果”的搜索时首先显示一个HTML块。那么我想在带有附加的第一个块内添加另一个ID为“ entitiesNav”的HTML块。那是我尝试过的方法，但是没有用，我该怎么办？

<div id="searchRes>

    <div class="media post-block m-b-xs-30" id="entitiesNav">

          </div>

    </div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            var searchRequest = null;
            $("#search").keyup(function() {
                var minlength = 1;
                var that = this;
                var value = $(this).val();

                var searchResult = $("#searchRes").html('');
                var entitySelector = $("#entitiesNav").html('');
                if (value.length >= minlength ) {
                   searchResult.append('<section class="section-gap section-gap-top__with-text trending-stories" >' +
                        '<div class="container">\n' +
                        '            <div class="section-title m-b-xs-40">\n' +
                        '                <h2 class="axil-title">Search Result</h2>\n' +
                        '\n' +
                        '            </div>\n' +
                        '            <div class="row">\n' +
                        '            <div class="col-lg-6">'+'</div> <!-- End of .col-lg-6 -->\n' +
                       '\t\t\t\t\t</div>\n' +
                       '\t\t\t\t\t<!-- End of .row -->\n' +
                       '\t\t\t\t</div>\n' +
                       '\t\t\t\t<!-- End of .container -->\n' +
                       '\t\t\t</section>'

                   ) ;

                    if (searchRequest != null)
                        searchRequest.abort();
                    searchRequest = $.ajax({
                        type: "GET",
                        url: "{{ path('search_ajax') }}",
                        data: {
                            'q' : value
                        },
                        dataType: "text",
                        success: function(msg){
                            //we need to check if the value is the same
                            if (value===$(that).val()) {
                                var result = JSON.parse(msg);
                                $.each(result, function(key, arr) {
                                    $.each(arr, function(id, value) {
                                        if (key === 'articles') {
                                            if (id !== 'error') {
                                                console.log(value[1]);

                                                entitySelector.appendTo(searchResult).append('<a href="/show_article'+id+'">'+'<img class=" m-r-xs-30" src="'+value[0]+'" >'+'</a>'+'<h3 class="axil-post-title hover-line hover-line">'+value[1]+'</h3>');
                                            } else {
                                                entitySelector.append('<li class="errorLi">'+value+'</li>');
                                            }
                                        }
                                    });
                                });
                            }
                        }
                    });
                }

            });
        });
    </script>

Answer 1

您正在移除上面的元素，然后尝试将元素放入现在不存在的已移除元素中。

您不需要清空该searchRes。