javascript - xmlからデータを取得してhtmlタグに挿入しますが、ソースコードには表示されません

Question

xml からデータを取得して ul タグに挿入します。コードを実行すると、ページが読み込まれ、ブラウザで画像が表示されますが、追加されたコードがブラウザ ビューのソースに表示されないため、jquery コードが機能しません (例: #GalleryList 要素をクリック)。どうすれば解決策を見つけることができますか?

JS:

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "data.xml",
        dataType: "xml",
        success: function (xml) {
            var items = [];
            $(xml).find("item").each(function (i) {
                items.push({
                    img: $(this).find("img").text(),
                    content: $(this).find("content").text()
                });
                $('#GalleryList').append('<li>' + items[i].img + '</li>');
                $('#GalleryDetail').append('<li><div class="detailLeft">' + items[i].img + '</div><div class="detailRight">' + items[i].content + '</div></li>');
                i++;
            });
            return items;
        }
    });
    var currentElem, lastElem;
    lastElem = $('#GalleryList li').last().index();
    $('#GalleryList li').click(function () {
        currentElem = $(this).index() + 1;
        $('#GalleryList').hide();
        $('.GalleryDetail').show();
        $('#GalleryDetail li').hide();
        $('#GalleryDetail li:nth-child(' + currentElem + ')').show();
        pageControl();
    });
});

HTML:

<ul id="GalleryList" class="clearfix">

</ul>
<div class="GalleryDetail">
   <ul id="GalleryDetail">

   </ul>
</div>