Question

我是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>

Answer 1

现在，您正在循环中创建元素，并将元素元素一次又一次地附加到DOM中。

您要做的是在循环的每次迭代期间创建一个新元素。要做到这一点，移动在循环中创建新div的部分：

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

现在，每次循环运行时，您都会创建一个新元素，并将该元素追加到ID为#board的元素。

值得指出的是，您创建的变量（board）现在只在此循环中具有范围。这意味着一旦循环完成，您需要找到一种不同的方式来访问新元素，如果您需要修改它们。

Answer 2

只创建了一个元素。

        <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>

Answer 3

其他人确实简单地回答了这个问题;这里有一种方法可以解决您和提议的代码片段中存在的一些问题，并可能为您提供进一步探索的一些见解。我希望它有所帮助：）

为了稍微扩展一个脚本，这个解决方案通过使用函数createDiv创建每个元素，并且对各个div的引用存储在一个数组中，因此您可以通过修改数组元素来修改每个div的内容。 DOM元素。（在这个例子中，为了演示，我修改了第6个div）

注意：

您的所有代码都被global object抛出，这很好练习封装你的代码，这里立即调用匿名函数。
即使封装了，你也需要在全局对象中抛出x 总是用var关键字声明你的变量。我在这里宣布所有变量都需要在一个声明中提前，这也很好实践;
使用＆＃34; i＆＃34; for循环迭代器变量。
避免＆＃34;魔术数字＆＃34; （9），而是创建一个将要的变量描述你在代码中做了什么。如果代码描述了什么是好的确实如此。
同样在这个例子中，我们避免声明＆＃34; board＆＃34;在每个循环上迭代（你的div被追加的元素。）
在JSLint中测试您的代码 - 验证脚本的绝佳工具。（考虑到你将缩进设置为2，这将通过测试。
＆＃34;使用严格的＆＃34; - read here。

＆＃13;

/*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();

}());

＆＃13;

.new-div {
color: gray;  
}

.modified-div {
color: red;  
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Inserting Divs</title>
  </head>
  <body>
    <div id="wrapper">
      <div id="container">
        <div id="board">
        </div>
      </div>
    </div>
  </body>
</html>

＆＃13;

使用相同的类javascript创建多个div

3 个答案: