javascript - Refresh div contents without reloading page -

i'm making web page javascript , html5. wrote code adds text div.

<script type="text/javascript">             var newgame = document.getelementbyid('playerstats');             newgame.innerhtml += 'name: ' + getplayername() + '<br/>';             newgame.innerhtml += 'class: ' + getplayerclass() + '<br/>';             newgame.innerhtml += 'level: ' + getplayerlevel() + '<br/>';             newgame.innerhtml += 'xp: ' + getplayerxp() + ' / ' + needxp[getplayerlevel()]; </script> 

now let's player's xp has changed. don't want have reload page see new xp. want div displaying player stats refresh immediately, without page reload. ideas?

p.s.: using load() isn't best solution. tried , it's not working should (the div becomes smaller , weird things happen).

update: did right now, there better approach?

function updatestats(){     var newgame = document.getelementbyid('playerstats');     newgame.innerhtml = '';     newgame.innerhtml += 'name: ' + getplayername() + '<br/>';     newgame.innerhtml += 'class: ' + getplayerclass() + '<br/>';     newgame.innerhtml += 'level: ' + getplayerlevel() + '<br/>';     newgame.innerhtml += 'xp: ' + getplayerxp() + ' / ' + needxp[getplayerlevel()]; }  function addxp() {     player.xp++;     if(player.xp >= needxp[getplayerlevel()]){         player.level++;         player.xp = 0;         alert('level up!');     }     store.set('player', { name: getplayername(), class: getplayerclass(), level: getplayerlevel(), xp: player.xp });     updatestats(); } 

currently have function gets each data point appears in newgame: getplayerxp, getplayerlevel, , on. can write corresponding set of functions set each data point. example:

function setplayerxp(player, xp) {   player.xp = xp;   updatestats(); } 

by including call updatestats(), ensure newgame gets updated when necessary. make sure use setplayerxp whenever want assign new value player attribute.