Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Home Page</title>

        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    </head>
    <body>

       ...
       <ul class="list-unstyled" id="itemList">
           <!-- JQuery function will be called when DOM is ready -->
       </ul>
       ...

       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
       <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">/script>
       <script src="my.js"></script>
       <script>
            $( document ).ready("fillInData('text.json')");
       </script>
    </body>
</html>

function fillInData (dataFile) {
    // remove any existing content
    var ft = $('#itemList');
    ft.empty();

    // populate new stuff from a co-located JSON file
    var htmlString = "";
    $.getJSON(dataFile, function(data) {
        $.each(data.items, function(i, item) {
            htmlString += '<li>' + item.name + ...;
            ...
            htmlString += '</li>'
        });
    });
    ft.innerHTML = htmlString;
}

$(document).ready(function() {
    fillInData('text.json');
});

$.getJSON(dataFile, function(data) {
    var htmlString = "";

    $.each(data.items, function(i, item) {
        htmlString += '<li>' + item.name + ...;
        ...
        htmlString += '</li>'
    });

    ft.html(htmlString); // it's a jQuery object, and it's async

});