移动新html页面的渲染元素

我在一个页面上呈现了一个Javascript函数，用户可以在该页面上单击列表元素，它会将他们带到一个新页面，显示有关该列表元素的更多信息。原始页面是#index，第二个页面是#index2，使用一个多页HTML页面进行编码。然而，我希望我可以将index2页面移动到它自己的html文件-index2.html，但我不确定如何在函数中引用新的index.html文件，以便元素可以移动到新文件。

我的代码如下：

    <script type="text/javascript">
    $(document).on('pagebeforeshow', '#index', function(){
        $("#list").empty();
        var url="http://localhost/tmp/json4.php";
        $.getJSON(url,function(json){
            //loop through deals
            $.each(json.deals,function(i,dat){
                $("#list").append("<li><a id='"+dat.dealid+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "><h1>"+dat.name+"</h1><h6>"+dat.dname+"</h6><h5>"+dat.description+"</h5></a></li>");
                $(document).on('click', '#'+dat.dealid, function(event){  
                    if(event.handled !== true) 
                    {
                        dealObject.dealID = $(this).attr('id'); 
                        dealObject.restaurantid = $(this).attr('data-restaurantid');
                        dealObject.shortName = $(this).find('h1').html(); 
                        dealObject.image = $(this).attr('data-image');
                        dealObject.dealName = $(this).find('h6').html();
                        dealObject.description = $(this).find('h5').html(); 
                        $.mobile.changePage( "#index2", { transition: "slide"} );
                        event.handled = true;
                    }
                });            
            });
            $("#list").listview('refresh');
        });
    });
    $(document).on('pagebeforeshow', '#index2', function(){       
        $('#index2 [data-role="content"]').find('#deal-img').attr('src',dealObject.dealObject);
        $('#index2 [data-role="content"]').find('#title').html(dealObject.name);
                $('#index2 [data-role="content"]').find('input#desc').val(dealObject.description);
                $('#index2 [data-role="content"]').find('input#tname').val(dealObject.dealName);
                $('#index2 [data-role="content"]').find('input#dealid').val(dealObject.dealID);

    });
    var dealObject = {
        dealID : null,
        restaurantid : null,
        shortName : null,
        image : null,
        dealName : null,
        description: null
    }    
</script>

如果有人能帮我，我真的很感激。