如何用另一个字符串替换createText节点-Javascript

Question

以下是显示用户在html页面上输入的字母的功能。我希望它像这样：

但是我最终得到这样的东西：

如何使它仅显示最后一个字符串？

这是我的代码：

var words = ['quaffle', 'bludger', 'pensieve', 'harry', 'lupin', 
'butterbeer', 'polyjuice', 'patronus', 'horcrux', 'voldemort'];
correctletters='';
missedletters='';

function getRandomWord(){
   randomWord = words[Math.floor(Math.random()* words.length)]; 
   wordlength = randomWord.length;
}

function getGuess(){
    letterGuessed = document.getElementById("inputfield").value.toLowerCase();
    document.getElementById("inputfield").value = null;
    alert(randomWord);
    alert(letterGuessed);
    r = randomWord.includes(letterGuessed);

    if(r == true){
        correctletters = correctletters + letterGuessed;
        alert("correct letters: "+correctletters);
    }

    else{
        missedletters = missedletters+letterGuessed;
        alert("missed letters: "+missedletters);
    }
    guess = missedletters + correctletters;
    displayGuessedLetters();
}

}

function displayGuessedLetters(){
   guessedletters = document.createElement("div");
   content = document.createTextNode(guess);
   guessedletters.appendChild(content);
   container = document.getElementById("inputcontainer");
   container.appendChild(guessedletters);
   guessedletters.style.cssText = 'font-family: "Josefin Sans"; font-size: 
   30px; text-transform: uppercase; color: rgb(255, 85, 49);';
}

编辑：问题是用户输入字母时。它不会重复显示在网页上。例如，如果用户键入“ a”，则容器将显示“ a”。下次用户键入“ b”时，容器应仅 具有“ a b”而不是a，然后显示ab。

Answer 1

请在下一个问题中添加所有相关的代码部分（例如correctLetters，missedletters等）

每次调用displayGuessedLetter函数时，您都将添加一个新的DIV。您只需要将新的letterGuessed附加到内容：

function displayGuessedLetters(){
   content = document.createTextNode(letterGuessed);
   container = document.getElementById("inputcontainer");
   container.appendChild(content);
}

只需在两者之间添加一个空格，然后将CSS样式应用于容器即可。我还将“ inputcontainer”重命名为“ outputcontainer”。

如果我的代码不符合您的需求，请发表评论，我将尝试看看！ 欢呼

编辑： 工作提琴：https://jsfiddle.net/ncpfxqhL/6/