El uso de append my innerdiv está adjuntando solo una CAJA DE COLOR DE TRIGO *; mientras uso appendTo my innerdiv está adjuntando todo el número requerido de CAJAS DE COLOR DE TRIGO. Por lo tanto, para mi caso, appendto está dando el resultado correcto, ¡mientras que append no lo hace!
$(()=>{ $('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>ahora mire este uso del método APPEND ->
$(()=>{ $('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>Cuál es la razón para esto. Por favor explique...
Mira esto
$(()=>{ $('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>