добавить div с помощью appendChild

#javascript #html #css

#javascript #HTML #css

Вопрос:

Предполагается, что этот код выполняет цикл и добавляет несколько divs, но он не работает. Когда я нажимаю на него, появляется только один div. Если я нажму еще раз, ничего не произойдет.

 <body>
    <div class="start" >
        <div id = "coba">
        </div>

        <div id = "cobi">
        </div>
    </div>
    <script>
        var divs = document.getElementById("coba").addEventListener("click", function () {

            for (var i = 1; i < 100; i  ) {
                var di = document.createElement('div');
                document.getElementById('coba').appendChild(di);

            }
        });
    </script>
</body>

Спасибо за вашу помощь

1. Он работает нормально, проверьте здесь

2. Без какого-либо оформления или содержимого вы не увидите несколько элементов div визуально, поскольку они пусты и не занимают вертикального пространства

3. Могу подтвердить то, что говорит @PatrickEvans; Я переделал ваш код в jsfiddle здесь: https://jsfiddle.net/q36tpLfL/1 / . Я добавил немного текста, просто чтобы иметь возможность что-либо видеть, и, похоже, это работает.

4. да, зададим ширину, высоту и границу и посмотрим, это работает.

Ответ №1:

Ваш код не работает, потому что вы ничего не делали с переменной «i» в операторе for. Если вы посмотрите на скрипты user2181397 amp; meghan Armes, вы увидите, как они добавили строку в скрипт, чтобы заставить его работать.

Я протестировал приведенное ниже в моей IDE, и оно работает просто отлично:

 <body>
   <div class="start" style="margin-top:50px; color:black;">
      <div id = "coba">
        <p>Click Me</p>
      </div>

      <div id = "cobi">
      </div>
 </div>

<script>
var divs = document.getElementById("coba").addEventListener("click", function() {

for (var i = 1; i < 100; i  ) {
   var di = document.createElement('div');
   di.innerHTML=i;
   document.getElementById('coba').appendChild(di);

}
});

</script>
</body>

1. спасибо за ваш ответ! но у меня есть другая проблема, поэтому на самом деле я предполагал создать фрактальное дерево, а форма div — прямоугольная

2. результат такой dropbox.com/s/hn0no6aq19nyzw3/Capture.PNG?dl=0 и если я нажму на него снова, ничего не произойдет.

3. Добро пожаловать. Я предлагаю опубликовать другой вопрос для фрактального дерева, чтобы его можно было отделить от этого.