Javascript 如何将div附加到正文中？

我应该将.moon和.planet指定给“planet”类并为其添加背景色，因此我需要创建一个div。我不知道如何将div附加到身体上

下面的代码显示了我当前正在尝试的内容。请指出我的错误

挑战：创造一个太阳系
身体{
背景色：黑色；
填充：10px；
}
.星球{
宽度：100px；
高度：100px；
边界半径：50%；
文本对齐：居中；
填充：10px；
位置：相对位置；
}
月亮先生{
位置：绝对位置；
宽度：30px；
高度：30px；
边界半径：50%；
背景：rgb（237237）；
}
var bodyEl=document.querySelector（“body”）；
对于（变量i=0；i

在创建变量“planetsNode”之前，您正在访问该变量，并且在指定背景颜色时，您正在从“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>

var body=document.querySelector（“body”）；
var planetsNode=document.createElement（“div”）；
planetsNode.className=“行星”；
body.style.backgroundColor=“rgb（235,12335）”；
body.appendChild（planetsNode）；

---

我不知道您为什么要使用loop。

您试图在创建“planetsNode”变量之前访问该变量的“length”属性。如果你想为每颗行星创建一个新的div，那么就创建一个行星阵列并在其中循环

<script>
    var planets = [
        ["Mercury", "46.3, 46.3, 46.3"],
        ["Venus", "80.4, 78.4, 76.1"], 
        ["Earth", "34.9, 37.3, 51.4"], 
        ["Mars", "99.6, 52.9, 37.3"],
        ["Jupiter", "85.1, 74.9, 65.1"], 
        ["Saturn", "86.3, 73.7, 50.6"],
        ["Uranus", "76.5, 91.4, 92.5"],
        ["Neptune", "28.2, 47.5, 98.8"]
    ];

    for (var i = 0; i < planets.length; i++) {

        var planetNode = document.createElement("div");
        planetNode.style.backgroundColor = "rgb(" + planets[i][1] + ")";

        var nameNode = document.createTextNode(planets[i][0]);
        planetNode.appendChild(nameNode);

        var body = document.querySelector("body");
        body.appendChild(planetNode);
    }
</script>

var行星=[
[“汞”、“46.3、46.3、46.3”]，
[“金星”，“80.4,78.4,76.1”]，
[“地球”、“34.9、37.3、51.4”]，
[“火星”、“99.6、52.9、37.3”]，
[“木星”，“85.1,74.9,65.1”]，
[“土星”，“86.3,73.7,50.6”]，
[“天王星”，“76.5,91.4,92.5”]，
[“海王星”，“28.2,47.5,98.8”]
];
对于（变量i=0；i<1.length；i++）{
var planetNode=document.createElement（“div”）；
planetNode.style.backgroundColor=“rgb（“+planets[i][1]+”）；
var nameNode=document.createTextNode（行星[i][0]）；
planetNode.appendChild（名称节点）；
var body=document.querySelector（“body”）；
body.appendChild（planetNode）；
}

试着运行你的代码。什么是

planetNode

？当你输入for时，planetNode不会被声明。然后，指导老师问我“你是否使用JS设置div的背景颜色以便行星实际显示？”我该怎么做？