title: Refresh div contents without reloading page
body: <p>I'm making a web page with JavaScript and HTML5. I wrote some code that adds text to a div.</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
              var newGame = document.getElementById('playerStats');
              newGame.innerHTML += 'Name: ' + getPlayerName() + '&lt;br/&gt;';
              newGame.innerHTML += 'Class: ' + getPlayerClass() + '&lt;br/&gt;';
              newGame.innerHTML += 'Level: ' + getPlayerLevel() + '&lt;br/&gt;';
              newGame.innerHTML += 'XP: ' + getPlayerXP() + ' / ' + needXP[getPlayerLevel()];
  &lt;/script&gt;
  </code></pre>
  
  <p>Now let's say that the player's XP has changed. I don't want to have to reload the page to see the new XP. I want the div displaying the player stats to refresh immediately, without a page reload. Any ideas?</p>
  
  <p>P.S.: Using <code>load()</code> isn't the best solution. I tried that already and it's not working as it should (the div becomes smaller and weird things happen).</p>
  
  <p>Update: I did something like this right now, but is there a better approach?</p>
  
  <pre class="lang-js prettyprint-override"><code>function updateStats(){
      var newGame = document.getElementById('playerStats');
      newGame.innerHTML = '';
      newGame.innerHTML += 'Name: ' + getPlayerName() + '&lt;br/&gt;';
      newGame.innerHTML += 'Class: ' + getPlayerClass() + '&lt;br/&gt;';
      newGame.innerHTML += 'Level: ' + getPlayerLevel() + '&lt;br/&gt;';
      newGame.innerHTML += 'XP: ' + getPlayerXP() + ' / ' + needXP[getPlayerLevel()];
  }
  
  function addXP() {
      player.XP++;
      if(player.XP &gt;= needXP[getPlayerLevel()]){
          player.Level++;
          player.XP = 0;
          alert('Level UP!');
      }
      store.set('player', { Name: getPlayerName(), Class: getPlayerClass(), Level: getPlayerLevel(), XP: player.XP });
      updateStats();
  }
  </code></pre>