When using the append method, my inner div is only attaching one WHEAT-COLORED-BOX, whereas when using appendTo, my inner div attaches all the required number of WHEAT-COLORED-BOXES. Therefore, in this case, appendTo gives the correct result while append fails to do so!
$(()=>{
$('button').click(function appendizing(){
for(let i=1; i<=9; ++i)
$('<div></div>').addClass('box').css("backgroundColor", "wheat").appendTo('.container');
});
});.container{
font-size: 0px;
border: 1px solid blue;
width: 120px;
height: 120px;
}
.box{
display: inline-block;
width: 40px;
height: 40px;
border-radius: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>
<button>appendDiv</button>now look at this APPEND method usage ->
$(()=>{
$('button').click(function appendizing(){
for(let i=1; i<=9; ++i)
$('.container').append('<div</div>').addClass('box').css("backgroundColor", "wheat");
});
});.container{
font-size: 0px;
border: 1px solid blue;
width: 120px;
height: 120px;
}
.box{
display: inline-block;
width: 40px;
height: 40px;
border-radius: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>
<button>appendDiv</button>Can anyone explain why this difference occurs? Please elaborate...