title: How can I save DOM elements inside of a javaScript object? I want to update the page by updating the object
body: <p>How can I save DOM elements inside of a javaScript object? I want to update the page by updating the object.</p>
  
  <p>Bellow I created and Added elements to the website using a for loop. I want to save some of those elements inside some objects properties so that I can update the html in the page by updating the textContent of the property value in the object.</p>
  
  <pre><code>for ( var i = 1 ; i &lt;= numberOfPlayers ; i++ ){
      //create object for each player.
      var name = nameInputArray[i].value;
      players["player" + i] = {
        name: name,
        score: 0,
        fireStreak: 0,
        xStreak: 0,
        html: {}
      }
  
      //Create a Player box for each player.
      var playerBox= document.createElement('div');
      playerBox.classList.add('player_box');
      document.getElementById('player-box-container').appendChild(playerBox);
  
      var playerName = document.createElement('div');
      playerName.textContent = players["player" + i].name;
      playerName.classList.add('player_names');
      playerBox.appendChild(playerName);
  
      var playerScoreHeading = document.createElement('div');
      playerScoreHeading.classList.add('player_score_heading');
      playerScoreHeading.textContent = "Player Score:";
      playerBox.appendChild(playerScoreHeading);
  
      var playerScoreDiv = document.createElement('div');
      playerScoreDiv.classList.add('player_score');
      playerBox.appendChild(playerScoreDiv);
  
      var playerScoreNumber = document.createElement('span');
      playerScoreNumber.classList.add('player_score_number');
      playerScoreNumber.textContent = players["player" + i].score;
  
      playerScoreNumber.id = "player_score_number_" + i;
  
  
  
      playerScoreDiv.appendChild(playerScoreNumber);
      //THIS IS THE PART NOT WORKING!!!!!!!!!!!!!!!!!(THE NEXT LINE)    
      players["player" + i].html.score = document.getElementById("player_score_number_" + i);
  
      playerScoreDiv.innerHTML += "pts";
  
  }
  </code></pre>
  
  <p>for some reason when I try to access: </p>
  
  <pre><code>function changeScore(){
    players.player1.html.score.textContent = 30;
  }
  </code></pre>
  
  <p>It would change the inside the object but it will not render on the webpage.</p>
  
  <p>Please help.</p>