Javascript 粘贴在页面顶部的按钮

我正在为一个学校项目制作一个刽子手游戏。“刽子手”显然在页面上有26个按钮，最好是在上面加上连字符。我们还需要使用一个for循环而不是26个按钮标签来制作所有26个按钮。我的问题是将按钮移动到页面的中间（按钮默认为顶部），因为我尝试的所有方法都不起作用。我需要帮助将我的按钮移到页面底部

我试着给我所有的按钮一个类，然后做[position:absolute；，bottom:0；]。此方法的问题是按钮被移动到底部，但只有z按钮可见。我相信，因为我使用了for循环，每个按钮在z处停止时都被下一个按钮覆盖了

/* my button creating function */
document.getElementById("letters")
for (var i = 0; i < 26; i++) {
   var button = document.createElement("BUTTON");
   var letterString = String.fromCharCode(97 + i);
   button.id = letterString;
   button.classList.add("letterButton")
   var tee = document.createTextNode(letterString);
   button.appendChild(tee);
   button.addEventListener("click", buttonHandler);
   document.body.appendChild(button);
}

/* my css that supposedly should move the buttons */
.letterButton { 
    position: absolute;
    bottom: 0;
}

/*我的按钮创建功能*/
document.getElementById（“字母”）
对于（变量i=0；i<26；i++）{
var button=document.createElement（“按钮”）；
var letterString=String.fromCharCode（97+i）；
button.id=字母字符串；
按钮。类列表。添加（“字母按钮”）
var tee=document.createTextNode（letterString）；
按钮。追加子项（T形三通）；
按钮.addEventListener（“单击”，按钮句柄）；
document.body.appendChild（按钮）；
}
/*我的css应该会移动按钮*/
.letterButton{
位置：绝对位置；
底部：0；
}

---

应将所有按钮移动到页面底部并可见。实际结果是，只有一个按钮[z]被移动到页面底部并可见。

您可以将单个按钮附加到容器

而不是DOM，并最终将该

移动到底部

var container=document.createElement（“div”）；
container.id=“container”；
container.classList.add（“container”）
文件.正文.附件（容器）；
函数buttonHandler（）
{
}
对于（变量i=0；i<26；i++）{
var button=document.createElement（“按钮”）；
var letterString=String.fromCharCode（97+i）；
button.id=字母字符串；
var tee=document.createTextNode（letterString）；
按钮。追加子项（T形三通）；
按钮.addEventListener（“单击”，按钮句柄）；
container.appendChild（按钮）；
}

.container{
位置：绝对位置；
底部：0；
}

1）for循环中的第四行：button.classList.add（“letterButton”）对于问题2，我不确定答案。代码确实满足了将代码放到页面底部的要求。然而，为了吸引尽可能少的代码，为了提高效率，我省略了我在按钮中使用的所有其他css。一些css包括[高度、宽度、字体、颜色、边框半径等]。您提供的代码的问题是，由于某种原因，所有其他css都会完全混乱。字体不再工作，大小是随机的，后面是随机的白色圆圈，等等。你知道为什么会这样吗？嗯，我不太确定。我省略了脚本的以下一行，因为我的示例不需要它：

button.classList.add（“letterButton”）所以你的按钮可能只是缺少css样式。（请记住这些属性的position属性应该是：relative）是的，我修改了添加该属性的代码！我完全忘记了这件事。我感谢你的帮助，现在一切都恢复正常了！