I am trying to insert some bootstrap elements on mouse click but it seems to insert [object Object], guess where I am wrong, thanks in advance

Jquery snippet

// 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')
    
});

Output in html

[object Object][object Object][object Object][object Object][object Object][object Object]

CodePudding user response：

you have issue in this part of code

let main_container = $(".main-contain")[0]
    main_container.append(div_contain)

in jQuery if you access like array it return html dom object.

change it to

let main_container = $(".main-contain").eq(0)
        main_container.append(div_contain)

CodePudding user response：

Try this

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>