Question

我正在研究一个训练营，有些人和我创建了一个小组。我们正在尝试使用纯JavaScript动态创建html元素。元素在那里，但我们运行错误，我们希望能够返回并稍后使用/抓取这些元素。我们非常感谢任何关于我们做错事的建议。

HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>JavaScript Grid</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div id="grid"></div>

    <script src="js/script.js" type="text/javascript"></script>
</body>
</html>

js：

(function() {

    var grid = document.getElementById("grid");

    for (var i = 0; i < 5; i++) {
        var temp = document.createElement("DIV");
        temp.className = "row";
        grid.appendChild(temp);
    }

    var row = grid.getElementsByClassName("row");

})();

CSS：

.grid {
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: black;
}

.row {
    overflow: auto;
}

.box {
    padding: 0;
    box-sizing: border-box;
    background-color: white;
    height: 100px;
    float: left;
}

谢谢！

Answer 1

我发现您的代码没有错误。你的div被收集，你可以和他们一起玩。看看jsfiddle并打开你的控制台。（按F12或右键单击检查元素。）

    (function() {

    var grid = document.getElementById("grid");

    for (var i = 0; i < 5; i++) {
        var temp = document.createElement("DIV");
        temp.className = "row";
        grid.appendChild(temp);
    }

    var row = grid.getElementsByClassName("row");

    row[row.length - 1].style.borderColor = "blue";
    row[0].style.borderColor = "red";
})();

和css

.row {
    background.color:#f2f2f2;
    border: 1px solid #dadada;
    margin-bottom:10px;
    height:20px;
}

http://jsfiddle.net/hu7a7k0s/

麻烦用JS动态创建元素

1 个答案: