создать несколько div с тем же классом javascript

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); 
} 

Теперь при каждом запуске цикла, вы будете создавать новый элемент, и добавить этот элемент к элементу с идентификатором #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, а ссылки на отдельные divs хранятся в массиве, поэтому вы можете изменять содержимое каждого div, изменяя элементы массива, которые относятся к элементам DOM. (В этом примере я изменяю 6-DIV ради демонстрации)

Примечания:

• Все кода брошено в global object, это хорошо практики инкапсулировать код, здесь сразу же вызывается анонимных функция.
• x был бы выброшен в глобальный объект, даже если он был инкапсулирован, вам нужно всегда объявлять переменные с помощью ключевого слова var. Здесь я объявляю все необходимые вам vars в одном заявлении, что также является хорошей практикой ;
• Согласие на использование переменной i для переменной итератора цикла.
• Избегайте «волшебных чисел» (9), скорее создайте переменную, которая будет описать, что вы делаете в своем коде. Хорошо, если код описывает то, что делает .
• Кроме того, в этом примере, мы избегаем объявляя «доска» на каждой итерации цикла
• Проверьте свой код в JSLint (элемент, где ваши дивы получить приложенном.) - отличный инструмент для проверки скриптов. (это пройдет тест, учитывая, что вы задаете отступ до 2.
• "use strict" - read here.

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