jQuery Mobile, alteração ao apresentar a página

Teste de alteração do conteúdo de um elemento ao apresentar determinada página.

by Salustiano Silva

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<div id="pagRanking" data-role="page">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
        <h1>Ranking</h1>
        <a id="btnPlayerName" href="#" class="ui-btn-right">Player</a>
    </div>
    
    <div data-role="content">
        <ul id="rankingList" data-role="listview"></ul>
    </div>
</div>

JavaScript

$(document).on('pageshow', '#pagRanking', function() {
    headerData();
})

function headerData() {
    var playerName = 'Zuul';
    
    /*if(sessionStorage.getItem('mbPlayerID') == null) {
        window.location.href="index.php";
    }*/
    var $btnInner = $('<span/>', {class:"ui-btn-class"}),
        $btn = $('<span/>', {class:"ui-btn-inner"});

    $btnInner.html(playerName).appendTo($btn);
    $("#btnPlayerName").html($btn);
}