Почему добавляется только один div?

Question

Я пытаюсь добавить несколько элементов div динамически. Тем не менее, только один элемент div создается/отображается в браузере, когда я иду, чтобы проверить код. Я пробовал искать похожие вопросы/проблемы, подобные этому, но ничего не нашел. Любая помощь будет оценена по достоинству.

.divcreate { 
    height:75px; 
    width:75px; 
    border:2px solid #000000; 
    display:inline-block; 
} 

$(document).ready(function() { 
    for (var i=0; i < 12; i++) { 
     $("body").append("<div></div>").addClass('divcreate'); 
    } 
}); 

Answer 1

Поскольку функция addClass относится к вашему селектору body, код добавляет 12 див, но затем применяя divcreate класс для вашего тела элемента. Ниже приведена простая рабочая версия, которая устанавливает класс inline.

$(document).ready(function(){ 
 
    for (var i=0; i < 12; i++) { 
 
     $("<div></div>").addClass('divcreate').appendTo(document.body) 
 
    } 
 
});

.divcreate { 
 

 
height:75px; 
 
width:75px; 
 
border:2px solid #000000; 
 
display:inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Добавить класс первый, а затем добавить

$(document).ready(function(){ 
 
    for (var i=0; i < 12; i++) { 
 
     $("body").after($('<div></div>').addClass('divcreate')); 
 
    } 
 

 
});

.divcreate { 
 

 
height:75px; 
 
width:75px; 
 
border:2px solid #000000; 
 
display:inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Вы добавляете класс к телу. Если вы поместите текст в div, вы увидите, что div фактически добавляется 12 раз. Смотрите эту jsfiddle ->https://jsfiddle.net/ehj6wzew/