Обновить содержимое div без перезагрузки страницы

Question

Я делаю веб-страницу с JavaScript и HTML5. Я написал код, который добавляет текст в 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> 

Теперь предположим, что XP игрока изменился. Я не хочу перезагружать страницу, чтобы увидеть новый XP. Я хочу, чтобы div, отображающий статистику игрока, обновлялся немедленно, без перезагрузки страницы. Есть идеи?

P.S .: Использование load() - не лучшее решение. Я уже пробовал это, и он не работает, как должен (div становится меньше, и происходят странные вещи).

Обновление: Я сделал что-то подобное прямо сейчас, но есть ли лучший подход?

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(); 
} 

Answer 1

В настоящее время у вас есть функция, которая получает каждую точку данных, которая появляется в newGame: getPlayerXP, getPlayerLevel, и так далее. Вы можете написать соответствующий набор функций для установки каждой точки данных. Например:

function setPlayerXP(player, xp) { 
    player.xp = xp; 
    updateStats(); 
} 

, включив вызов updateStats(), вы убедитесь, что newGame обновляется по мере необходимости. Теперь убедитесь, что вы используете setPlayerXP всякий раз, когда вы хотите назначить новое значение этому атрибуту игрока.