我应该将 .moon 和 .planet 分配给“planet”类并为其添加背景颜色，因此我需要创建一个 div。我不知道如何将 div 附加到正文。
下面的代码显示了我当前正在尝试的内容。请指出我的错误。
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Create a solar system</title>
<style>
body {
background-color: black;
padding: 10px;
}
.planet {
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
padding: 10px;
position: relative;
}
.moon {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgb(237, 237, 237);
}
</style>
</head>
<body>
<script>
var bodyEl = document.querySelector("body");
for (var i = 0; i < planetsNode.length; i++) {
var planetsNode = document.createElement("div");
planetsNode[i].className += "planet";
planetsNode.body.backgroundColor = "rgb(235, 12, 235)";
document.body.appendChild(planetsNode);
}
</script>
</body>
</html>最佳答案
您在创建变量“planetNode”之前访问它，并且在分配背景颜色时从“planetNode”元素访问正文。
希望这可能有所帮助。
<script>
var body = document.querySelector("body");
var planetsNode = document.createElement("div");
planetsNode.className = "planet";
body.style.backgroundColor = "rgb(235, 12, 235)";
body.appendChild(planetsNode);
</script>
我不知道你为什么要使用循环。
关于javascript - 如何将 div 添加到 body 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56278497/