Using append my innerdiv is attaching only one WHEAT-COLORED-BOX*; while using appendTo my innerdiv is attaching all the required number of WHEAT-COLORED-BOXES. Thus, for my case appendto is giving right 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>What is the reason for this. Kindly explain...
Check This
$(()=>{
$('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>$(()=>{
$('button').click(function appendizing(){
for(let i=1; i<=9; ++i)
$('.container').append('<div class="box" style="background-color: wheat;"></div>');
});
});.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>