附加对象而不是 html

Question

我试图在鼠标单击时插入一些引导元素，但它似乎插入了[object Object]，猜猜我错在哪里，提前谢谢

Jquery sn-p

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

html 输出

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

Answer 1

这部分代码有问题

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

在 jQuery 中，如果你访问 like 数组，它会返回 html dom 对象。

改成

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

Answer 2

试试这个

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>