jQuery点击插入Bootstrap元素时输出[object Object]错误排查求助

错误原因 #

你代码里存在3处问题点，直接导致输出[object Object]：

• 你通过$(".main-contain")[0]获取到的是原生DOM对象，原生DOM的append()方法传入jQuery对象时，会自动将对象转为字符串序列化，最终就会输出[object Object]
• 创建外层div的代码存在语法错误：$("<div></div")缺少标签闭合的右尖括号，正确写法为$("<div></div>")
• 如果你的触发按钮是id为add的元素，$(add)的写法错误，应该写成$('#add')，否则会因为add变量未定义报错。

修复方案 #

推荐统一用jQuery的API操作节点，修改后的代码如下：

// 添加技能容器
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")
        )
    )
    // 直接用jQuery对象的append方法，不需要转原生DOM
    $(".main-contain").append(div_contain)
}

// 绑定添加技能的点击事件
$('#add').on('click', function (e) {
    e.preventDefault()
    addSkillsContainer()
    console.log('clicked')
});

如果你一定要用原生DOM的append方法，只需将传入的jQuery对象转为原生DOM节点即可：

let main_container = $(".main-contain")[0]
// 用[0]取出jQuery对象封装的原生DOM节点再传入
main_container.append(div_contain[0])

内容的提问来源于stack exchange，提问作者Atif Shafi