I am trying to append my JSON datas into the content page but the datas are not loaded. When I use console.log I can see the data appearing.

JS:

$(document).on('pagebeforeshow', '#blogposts', function() {     
//$.mobile.showPageLoadingMsg();    
  $.ajax({
  url: "http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=",
     dataType: "json",
     jsonpCallback: 'successCallback',
     async: true,
     beforeSend: function() { $.mobile.showPageLoadingMsg(true); },
     complete: function() { $.mobile.hidePageLoadingMsg(); },
     success:function(data){
        $.each(data.posts, function(i, val) {
    console.log(val.title);
    $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>').appendTo('#postList');
    return (i !== 4);
        console.log('#postlist');
        });
      },
     error: function(data) {
        alert("Data not found");
    }
   });
});

HTML:

<!-- Page: Blog Posts -->
    <div id="blogposts" data-role="page">
        <div data-role="header" data-position="fixed">
            <h2>My Blog Posts</h2>
        </div><!-- header -->
        <div data-role="content">
            <ul id="postlist"> </ul><!-- content -->
        </div>
        <div class="load-more">Load More Posts...</div> 
    </div><!-- page -->