如何在主體上添加div？

Question

我應該將.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>

Answer 1

在創建變量'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>

我不知道你為什么要使用循環。

Answer 2

您試圖在創建'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>

如何在主體上添加div？

問題描述

2 個解決方案

解決方案1
1 2019-05-23 15:33:26

解決方案2
0 2019-05-23 16:01:56

如何在主體上添加div？

問題描述

2 個解決方案

解決方案1 1 2019-05-23 15:33:26

解決方案2 0 2019-05-23 16:01:56

解決方案1
1 2019-05-23 15:33:26

解決方案2
0 2019-05-23 16:01:56