我正在尝试使用 jQuery 为我的 for 循环的每次迭代创建一个新按钮，但由于某种原因，我的按钮没有呈现在页面上。虽然我对这一切很陌生，但我不认为我的语法有误，但由于某种奇怪的原因，jQuery 不允许我创建元素，我找不到任何解释。这可能是我这边愚蠢的事情，如果你们看看我的这段代码并让我知道我做错了什么，我将不胜感激：
for (let i = 0; i < letters.length; i++) {
const letterBtn = $("<button>");
letterBtn.addClass("letter-button letter letter-button-color");
letterBtn.attr("data-letter", letters[i]);
letterBtn.text(letters[i]);
$("#button").append(letterBtn);
}
这是我的完整 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fridge Magnets</title>
</head>
<style>
body {
background: url(assets/fridge.png) no-repeat;
}
.letter {
width: 30px;
height: 30px;
border-style: solid;
padding: 2px;
float: left;
margin: 2px;
}
.letter-button-color {
color: darkcyan;
}
.fridge-color {
color: orange;
}
#display {
margin-top: 78px;
height: 500px;
width: 220px;
margin-left: 60px;
}
#buttons {
padding-top: 60px;
}
#clear {
margin-left: 20px;
font-size: 25px;
color: black;
border-style: solid;
width: 100px;
}
</style>
<body>
<div id="display"></div>
<div id="buttons"></div>
<button id="clear">clear</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
const letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "_"];
for (let i = 0; i < letters.length; i++) {
const letterBtn = $("<button>");
letterBtn.addClass("letter-button letter letter-button-color");
letterBtn.attr("data-letter", letters[i]);
letterBtn.text(letters[i]);
$("#button").append(letterBtn);
}
});
</script>
</body>
</html>
请尝试以下示例。
let letters = ['a', 'b', 'c']
for (let i = 0;i < letters.length;i++) {
let newBtn = $('<button>')
newBtn.addClass("letter-button letter letter-button-color");
newBtn.attr("data-letter", letters[i]);
newBtn.text(letters[i])
$('#mainbar').append(newBtn) // #mainbar means your target element that will include new buttons
}