Ich bin neu in JavaScript und möchte wissen, wie ich mehrere Divs dynamisch mit demselben Klassennamen erstellen kann. Ich habe den folgenden Code, aber er erstellt nur eine Instanz des 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>
5
Yamaha32088 1 Dez. 2013 im 07:04

3 Antworten

Beste Antwort

Im Moment erstellen Sie das Element außerhalb der Schleife und hängen dieses -Element immer wieder an das DOM an.

Sie möchten bei jeder Iteration der Schleife ein neues Element erstellen. Verschieben Sie dazu den Teil, in dem Sie das neue Div erstellen, innerhalb der Schleife:

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

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

Jetzt erstellen Sie jedes Mal, wenn die Schleife ausgeführt wird, ein neues Element und hängen dieses Element an das Element mit der ID #board an.

Es sei darauf hingewiesen, dass die von Ihnen erstellte Variable (board) nur noch Gültigkeitsbereich innerhalb dieser Schleife hat. Das bedeutet, dass Sie nach Abschluss der Schleife einen anderen Weg finden müssen, um auf die neuen Elemente zuzugreifen, wenn Sie sie ändern müssen.

5
Thomas Kelley 1 Dez. 2013 im 03:07

Es wird nur ein einziges Element erstellt.

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

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

Sollte geschrieben werden als:

        <script>
            for(x=0; x<9;x++) {
            var board = document.createElement('div');
            board.className = "blah";
            document.getElementById('board').appendChild(board);
            }
        </script>
2
Tom Chung 1 Dez. 2013 im 03:07

Andere beantworteten die Frage auf den Punkt gebracht; Hier ist ein Ansatz, der einige Probleme behebt, die in Ihren und vorgeschlagenen Codefragmenten vorhanden sind, und Ihnen möglicherweise einen Einblick für die weitere Untersuchung gibt. Ich hoffe, es hilft :)

Um ein Skript ein wenig zu erweitern, erstellt diese Lösung jedes Element mithilfe der Funktion createDiv. Verweise auf einzelne Divs werden in einem Array gespeichert, sodass Sie den Inhalt jedes Divs ändern können, indem Sie Array-Elemente ändern, die auf DOM-Elemente verweisen. (In diesem Beispiel ändere ich die 6. Division zur Demonstration)

Anmerkungen:

  • Ihr gesamter Code wird in ein globales Objekt geworfen gut üben Sie, Ihren Code zu kapseln, hier sofort aufgerufen anonyme Funktion.
  • x wird in ein globales Objekt geworfen, selbst wenn es gekapselt ist. Sie müssen Ihre Variablen immer mit einem var-Schlüsselwort deklarieren. Hier erkläre ich alle benötigten Vars im Voraus in einer Aussage, was ebenfalls eine gute Praxis ist.
  • Es ist üblich, "i" für die Schleifeniteratorvariable zu verwenden.
  • Vermeiden Sie "magische Zahlen" (9), sondern erstellen Sie eine Variable, die beschreibt, was Sie in Ihrem Code tun. Es ist gut, wenn der Code beschreibt, was er tut.
  • Auch in diesem Beispiel vermeiden wir es, bei jeder Schleifeniteration "Board" zu deklarieren (das Element, an das Ihre Divs angehängt werden).
  • Testen Sie Ihren Code in JSLint - ein großartiges Tool zur Validierung Ihrer Skripte. (Dies besteht den Test, vorausgesetzt, Sie setzen die Einrückung auf 2.
  • "use strict" - hier lesen.
/*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>
1
Community 23 Mai 2017 im 10:30