如何在JavaScript中将拆分后的数组元素存入独立Div？

嘿，我仔细看了你的代码，发现你已经把短语拆分成了单个字符，也在创建对应的Div，但核心问题是没把字母内容填入Div里——你只是创建了空的.letter容器，所以看不到字母显示。另外还有几个小细节可以调整，让布局和逻辑更顺畅，下面一步步来解决：

核心修改：给字母Div添加内容 #

在你创建.letter类的Div时，只需要多一步：把当前循环到的字符赋值给Div的textContent属性。这样每个方块就会显示对应的字母了。

优化后的完整代码 #

JavaScript

let phrases = [ "Fish Out Of Water", "The Eifle Tower", "Berlin Syndrome", "bees", "arnold", "palmer" ];

function createDiv(parent, className){
  let div = document.createElement('div');
  div.className = className;
  parent.appendChild(div);
  return div;
}

function loadPhrase(phrases) {
  let characters = [];
  let rand = Math.floor(Math.random() * phrases.length);
  let selectedPhrase = phrases[rand].split("");
  
  console.log(selectedPhrase);
  let display = document.getElementById("display");
  // 清空之前的内容，避免多次调用重复添加
  display.innerHTML = "";
  
  let word = createDiv(display,'word');
  
  for (let i = 0; i < selectedPhrase.length; i++){
    if(selectedPhrase[i] == ' '){
      characters.push(createDiv(word,'space'));
      // 为下一个单词创建新的word容器
      word = createDiv(display, 'word');
    }else{
      let letterDiv = createDiv(word, 'letter');
      // 关键：把字母填入Div
      letterDiv.textContent = selectedPhrase[i];
      characters.push(letterDiv);
    }
  }
  console.log(characters);
};

loadPhrase(phrases)

CSS

#display{
  background:blue;
  width:750px;
  margin:auto;
  padding: 20px;
  overflow: hidden; /* 清除float带来的布局塌陷 */
}

.word {
  margin-bottom: 60px;
  display: inline-block;
  margin-right: 10px; /* 单词之间增加间距 */
}

.letter {
  float:left;
  border-bottom:2px solid white;
  width:50px;
  height:100px;
  font-size: 50px;
  text-align: center;
  color: white;
  margin:10px 10px 0;
  line-height: 100px; /* 让字母垂直居中 */
}

.space{
  float:left;
  margin:10px 10px 0;
  width:21px;
}

HTML

<div id="display">
</div>

额外优化说明 #

1. 清空display容器：添加了display.innerHTML = "";，这样如果多次调用loadPhrase，不会重复叠加之前的内容。
2. 字母垂直居中：给.letter加上line-height: 100px;，让字母在方块里垂直居中，视觉效果更好。
3. 变量名更清晰：把函数参数从phrase改成了phrases，避免和局部的短语变量混淆，可读性更强。
4. 清除布局塌陷：给#display加上overflow: hidden;，解决float元素导致的容器高度塌陷问题。

现在运行代码，你就能看到每个字母都被放进了独立的方块里，空格也会显示对应的空白块，完全符合你想要的效果啦！

内容的提问来源于stack exchange，提问作者Swink