Estoy tratando de insertar algunos elementos de arranque al hacer clic con el mouse, pero parece insertar [object Object] , adivina dónde me equivoco, gracias de antemano
Fragmento de JQuery
// adding skills container let addSkillsContainer = () =>{ let div_contain =$("<div></div") div_contain.addClass("col-md-5") div_contain.append( $("<div></div").addClass("form-group input-group").append( $("<input>").attr("type","text").addClass("form-control") ) ) let main_container = $(".main-contain")[0] main_container.append(div_contain) } // event for calling skills add function $(add).on('click', function (e) { e.preventDefault() addSkillsContainer() console.log('clicked') });Salida en html
[object Object][object Object][object Object][object Object][object Object][object Object]tienes un problema en esta parte del código
let main_container = $(".main-contain")[0] main_container.append(div_contain)en jQuery, si accede como una matriz, devuelve el objeto html dom.
cambiarlo a
let main_container = $(".main-contain").eq(0) main_container.append(div_contain)Prueba esto
let addSkillsContainer = () =>{ const div_contain =` <div class='col-md-5'> <div class="form-group input-group"> <input type="text" class="form-control"> </div> </div> `; $(".main-contain")[0].innerHTML +=div_contain; } $("#add").on('click', function (e) { e.preventDefault() addSkillsContainer(); }); let addSkillsContainer = () =>{ const div_contain =` <div class='col-md-5'> <div class="form-group input-group"> <input type="text" class="form-control"> </div> </div> `; $(".main-contain")[0].innerHTML +=div_contain; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">Add</button> <div class="main-contain"> </div>