logo标签列表

用JavaScript创建多个具有相同类的div

javascript
5

我是JavaScript的新手，想知道如何动态创建多个具有相同类名的div。我有以下代码，但它只创建了一个div实例。

<div id="wrapper">
    <div id="container">
        <div id="board">
            <script>
                var board = document.createElement('div');
                board.className = "blah";

                for(x=0; x<9;x++) {
                document.getElementById('board').appendChild(board);
                }
            </script>
        </div>
    </div>
</div>
3个回答
6

目前，您正在循环之外创建元素，并将该元素一遍又一遍地附加到DOM中。

您想要的是在每次迭代循环时创建一个新元素。为此，请将创建新div的部分移至循环内：

for(x=0; x<9;x++) {
    var board = document.createElement('div');
    board.className = "blah";

    document.getElementById('board').appendChild(board);
}

现在，每次循环运行时，您将创建一个新元素，并将该元素附加到具有ID #board的元素上。
值得指出的是，您创建的变量（board）现在仅在此循环内部具有作用域。这意味着一旦循环完成，如果需要修改新元素，则需要找到其他访问方式。
3

仅创建一个元素。

        <script>
            var board = document.createElement('div');
            board.className = "blah";

            for(x=0; x<9;x++) {
            document.getElementById('board').appendChild(board);
            }
        </script>

应该这样写：

        <script>
            for(x=0; x<9;x++) {
            var board = document.createElement('div');
            board.className = "blah";
            document.getElementById('board').appendChild(board);
            }
        </script>
2
其他人已经简要回答了问题；这里提供的方法解决了你和提出的代码片段中存在的一些问题，并可能为进一步探索提供了一些见解。希望能对你有所帮助：）
为了稍微扩展脚本，这个解决方案通过使用createDiv函数创建每个元素，并将对单个div的引用存储在一个数组中，因此您可以通过修改数组元素来修改每个div的内容，这些数组元素是指向DOM元素的引用。（在本例中，我修改了第6个div以进行演示）
注：
  • 你的所有代码都被扔进了一个全局对象中，最好的做法是将你的代码封装在一个立即调用的匿名函数中。
  • 即使封装了，x也会被扔进全局对象中，你需要总是使用var关键字声明变量。在这里，我使用一条语句提前声明所有需要的变量，这也是一个好习惯；
  • 循环迭代器变量通常使用"i"表示。
  • 避免使用"魔术数字"（9），而是创建一个描述你在代码中所做的事情的变量。如果代码能够描述它所做的事情，那就很好。
  • 在这个例子中，我们还避免在每次循环迭代中声明"board"（你的div元素所附加的元素）。
  • 使用JSLint测试你的代码-这是一个验证你的脚本的好工具。（如果你将缩进设置为2，这将通过测试。）
  • "use strict"-在这里阅读。

/*jslint browser:true */

(function () {
  "use strict";

  function createDiv() {
    var boardDiv = document.createElement("div");

    boardDiv.className = "new-div";
    boardDiv.innerText = "I am new DIV";

    return boardDiv;
  }

  function createAndModifyDivs() {
    var board = document.getElementById("board"),
      myDivs = [],
      i = 0,
      numOfDivs = 9;

    for (i; i < numOfDivs; i += 1) {
      myDivs.push(createDiv());
      board.appendChild(myDivs[i]);
    }

    myDivs[5].className = "modified-div";
    myDivs[5].innerText = "I'm modified DIV";
  }

  createAndModifyDivs();

}());
.new-div {
color: gray;  
}

.modified-div {
color: red;  
}
<!DOCTYPE html>
<html>
  <head>
    <title>Inserting Divs</title>
  </head>
  <body>
    <div id="wrapper">
      <div id="container">
        <div id="board">
        </div>
      </div>
    </div>
  </body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接