Javascript 将迭代结果追加到数组中创建的div中

我正在为一个实践项目构建一个游戏，在试图找出如何将迭代数组的结果附加到for循环创建的div中时遇到了一个问题。带有附加数组数据的div随后将被推送到DOM

这个问题的焦点是这个堆栈底部的循环。我已经包括了JS代码的其余部分（和注释）作为参考

它正确地迭代我的数组（var splitWordArray），并正确地创建与该迭代相等的div数

在这一点上，我只是不确定将splitWordArray的各个字母推入这些div的代码

我假设appendChild（）是解决这个问题的方法，但我希望在解决这个问题时能得到社区的支持

单词

cat

的预期结果是：

<div>
    <div>c</div><div>a</div><div>t</div>
</div>

猫

谢谢

//Hangman PSEUDOCODE
//declare words array
var hangManWords = ['potato', 'mobile', 'lego', 'jacket',
`enter code here`'apple', 'cat', 'throne', 'street',];


//Game start - Display in HTML, "Press any key to get started"
$("#startButton").on("click", function() {
  console.log("START BUTTON CLICKED")
  document.onkeyup = gameStart();
});



    //User presses any key to start.
    var gameStart = function startGame() {

  //Random word is pulled from hangManWords array.
  var getRandomWord = hangManWords[Math.floor(Math.random() * 
  hangManWords.length)];
  console.log("Your word is " + getRandomWord);

  //word choice is counted
  var wordLength = getRandomWord.length;
  console.log("There are " + wordLength + " letters in the word 
  chosen");

  //word choice is split into its seperate letters and stored in an 
  //array called splitWordArray.
  var splitWordArray = getRandomWord.split("");
  console.log("The word is now split thusly " + splitWordArray);

  //Computer determines number of guesses.
  var guessNumber = (wordLength + 6);
  console.log("You have " + guessNumber + " guesses to win");;

  //Display instructions as alert();
   console.log("Alert = Choose letters in order to guess the word! 
   You have "  + guessNumber + " guesses");

  //create divs, iterate splitWordArray out and append splitWordArray 
  //into them.

  var hangDiv = document.createElement("div")

  for (i = 0; i < wordLength; i++){
  console.log(hangDiv);
  console.log(splitWordArray[i]);
  console.log(hangDiv.appendChild(splitWordArray));
  };

  };// gameStart function endtag

//刽子手伪代码
//声明单词数组
var hangManWords=[‘土豆’、‘手机’、‘乐高’、‘夹克’，
`在此处输入代码“‘苹果’、‘猫’、‘宝座’、‘街道’、]”；
//游戏开始-以HTML显示，“按任意键开始”
$（“#开始按钮”）。在（“单击”，函数（）{
日志（“单击启动按钮”）
document.onkeyup=gameStart（）；
});
//用户按任意键启动。
var gameStart=函数startGame（）{
//从hangManWords数组中提取随机单词。
var getRandomWord=hangManWords[Math.floor（Math.random（）*
字数（字数）；
log（“您的单词是”+getRandomWord）；
//字眼选择是重要的
var wordLength=getRandomWord.length；
log（“单词中有“+wordLength+”个字母
选定的）；
//单词选择被拆分为单独的字母，并存储在
//数组名为splitWordArray。
var splitWordArray=getRandomWord.split（“”）；
log（“单词现在被拆分”+splitWordArray）；
//计算机决定猜测的次数。
var guessNumber=（字长+6）；
log（“你有“+guessNumber+”猜测获胜”）；；
//将指令显示为警报（）；
log（“Alert=选择字母来猜单词！
你有“+猜数+”猜“；
//创建div，迭代splitWordArray out并追加splitWordArray
//我喜欢他们。
var hangDiv=document.createElement（“div”）
对于（i=0；i

如前所述

.appendChild需要一个节点/html元素

您必须在循环中创建新元素并将它们附加到div中

示例：

for（i=0；i

您可以使用或使用以下代码段调试代码：

//刽子手伪代码
//声明单词数组
var hangManWords=[‘土豆’、‘手机’、‘乐高’、‘夹克’，
‘苹果’、‘猫’、‘宝座’、‘街道’，
];
//游戏开始-以HTML显示，“按任意键开始”
$（“#开始按钮”）。在（“单击”，函数（）{
日志（“单击启动按钮”）
document.onkeyup=gameStart（）；
});
//用户按任意键启动。
var gameStart=函数startGame（）{
//从hangManWords数组中提取随机单词。
var getRandomWord=hangManWords[Math.floor（Math.random（）*hangManWords.length）]；
log（“您的单词是”+getRandomWord）；
//字眼选择是重要的
var wordLength=getRandomWord.length；
log（“所选单词中有“+字长+”个字母”）；
//单词选择被拆分为单独的字母，并存储在
//数组名为splitWordArray。
var splitWordArray=getRandomWord.split（“”）；
log（“单词现在被拆分”+splitWordArray）；
//计算机决定猜测的次数。
var guessNumber=（字长+6）；
log（“你有“+guessNumber+”猜测获胜”）；；
//将指令显示为警报（）；
log（“警报=选择字母以猜测单词！您有“+猜测数字+”猜测”）；
//创建div，迭代splitWordArray out并追加splitWordArray
//我喜欢他们。
var hangDiv=document.createElement（“div”）
对于（i=0；i

span{
边框底部：1px纯色灰色；
保证金：2倍；
}

开始

我会这样做：

var str = "hello";

  for (i = 0; i < str.length; i++){
  var hangDiv = document.createElement("div");
    hangDiv.innerHTML = str[i];
    document.body.appendChild(hangDiv);
  };

var str=“你好”；
对于（i=0；i

---

.appendChild

需要一个HTML元素，如arg所示。您可以

innerHTML+=

预期的结果/输出是什么？这些字母应该用

s、

s、@Rajesh在附加到DOM时确实如此，但我正在尝试在迭代后将splitWordArray附加到hangDiv中。@Andreas是的，这就是我希望实现的。比如说，如果这个词是“猫”，那么它最后会变成c a T，这就非常感谢Rajesh。我会试一试的！这不是TO所要求的结果，并且在修复后，本质上与来自TO的代码相同Rajesh@Andreas在评论中，OP说他希望每个字符都被一个

div

封装，这就是我的代码所做的。如果你暗示我复制了Rajesh，那么你错了，哈哈，我只是碰巧在几秒钟后发布了它him@JosanIracheta没有人指责任何人。安德烈亚斯的意思是，它的内容是重复的。@Rajesh你真的把你的答案贴在了