追加jQuery不起作用

Question

我正在創建搜索建議，我想創建一個div並將建議元素（例如全名，圖片和...）放入其中。 所以我的HTML代碼中有一個空的div，我的建議將添加到其中。

<input type="text" name="query" autocomplete="off" id="base_main_search_box">
<button type="button" value="" id="base_main_search_box_button"></button>
<div id="main_searchSuggestion">

</div>

我想在用戶鍵入輸入類型時顯示搜索建議。 所以我創建了jQuery函數。 我的jQuery函數是：

$('#base_main_search_box').keyup(function () {
    $.ajax({url:'http://localhost:8000/search_suggestion/',success:function(result){
            $(addSuggestion).append('<div class="base_searchSuggestionItem">' +
                '<img src="' + result.movie_images[i] + '" class="base_searchSuggestionItem_image">' +
                '<div class="base_searchSuggestionItem_info">' +
                    '<p class="base_searchSuggestionItem_info_name">' +
                        '<a href="">' +
                            result.movie_names[0] +
                        '</a>' +
                        '(' +
                        result.movie_yearProduction[0] +
                        ')' +
                    '</p>' +
                    '<p class="base_searchSuggestionItem_info_description">' +
                        result.movie_descriptions[0] +
                    '</p>' +
                '</div>' +
            '</div>');
            console.log('final: '+addSuggestion.innerHTML);
        }
    }});
});

輸出為：

"final: undefined"

這是不正確的。

Answer 1

根據文檔

.html()在XML文檔中不可用，因此您需要在設置或檢查其HTML之前將其添加到DOM。

更改順序如下

        $(addSuggestion).append(search_item);
        $(search_item).html(
            div_innerHTML
        );
        console.log('div_innerHTML: '+div_innerHTML);
        console.log('search_item: '+$(search_item).innerHTML);