如何保存一个javaScript对象内的DOM元素？我想通过更新对象来更新页面

Question

如何保存一个javaScript对象内的DOM元素？我想通过更新对象来更新页面。

使用for循环创建和添加元素到网站的波纹管。我想将某些元素保存在某些对象属性中，以便通过更新对象中属性值的textContent来更新页面中的html。

for (var i = 1 ; i <= 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"; 

} 

由于某种原因，当我试图访问：

function changeScore(){ 
    players.player1.html.score.textContent = 30; 
} 

它会改变物体内，但它不会对网页渲染。

请帮忙。

Answer 1

通过将一个HTML字符串重新分配给playerScoreDiv.innerHTML，您将失去先前创建的所有元素对象作为playerScoreDiv的后代：它们将从HTML重新创建（具有明显不同的对象引用）。

所以不是：

playerScoreDiv.innerHTML += "pts"; 

做：

playerScoreDiv.appendChild(document.createTextNode('pts'));