Question

我正在为练习项目构建一个游戏，并且在尝试找出如何将迭代数组的结果附加到由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

Answer 1

如前评论，

.appendChild需要一个Node / html元素。

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

<强>示例：

for (i = 0; i < wordLength; i++) {
  console.log(hangDiv);
  console.log(splitWordArray[i]);
  var span = document.createElement('span')
  span.innerHTML = splitWordArray[i]
  console.log(hangDiv.appendChild(span));
};

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

＆＃13;

//Hangman PSEUDOCODE
//declare words array
var hangManWords = ['potato', 'mobile', 'lego', 'jacket',
  '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]);
    var span = document.createElement('span')
    span.innerHTML = splitWordArray[i]
    console.log(hangDiv.appendChild(span));
  };
  document.querySelector('.content').appendChild(hangDiv)
}; // gameStart function endtag

＆＃13;

span {
  border-bottom: 1px solid gray;
  margin: 2px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="startButton">Start</button>
<div class="content"></div>

＆＃13;

Answer 2

我就是这样做的：

var str = "hello";

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

demo

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

2 个答案: