<div id="page1" data-role="page">
<div data-role="header" data-position="fixed" align="center"><img src="img/VAWE-long-300x30-transparent.png" width="300" height="30" alt="" /></div>
<div data-role="content" style="margin:0; padding:0;">
<div id="wowslider-container1" style="padding-bottom:10px;">
<div class="ws_images">
<ul>
<li><img src="data1/images/catering_1.png" alt="" title="" id="wows1_0" /></li>
<li><img src="data1/images/rev._pamela_a._mann.png" alt="wowslider.com" title="" id="wows1_1" /></li>
<li><img src="data1/images/catering.png" alt="" title="" id="wows1_2" /></li>
</ul>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<div style="padding-bottom:5px;">
<img src="img/Wedding in a Box.png" style="width:100%!important;">
</div>
<div style="padding-bottom:5px;">
<img src="img/Flutter My Shutter.png" style="width:100%!important;">
</div>
<div style="padding-bottom:5px;">
<img src="img/Brock's riverside.png" style="width:100%!important;">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" class="ui-nodisc-icon">
<ul>
<li><a href="#" class="ui-icon-home ui-btn-icon-top ui-btn-active">Home</a></li>
<li><a href="#" class="ui-icon-calendar ui-btn-icon-top">Events</a></li>
<li><a href="#" class="change-vendors-text">Different Text</a></li>
<li><a href="#map" class="ui-icon-location ui-btn-icon-top">Map</a></li>
<li><a href="#" onClick="loginCheck()" class="ui-icon-user ui-btn-icon-top">Profile</a></li>
</ul>
</div>
</div>
</div>
I'm exploring the possibility of using jQuery within a pageinit function to modify the text and icon for the "Vendors" menu item as shown above. Is this achievable?