尝试追加div却显示[object Object]的技术问题求助

嘿，我一眼就看到问题啦——你这里混用了jQuery对象和原生DOM API，这就是为什么会出现[object Object]而不是预期的红色小方块。

问题根源 #

你用$("<div></div>")创建了一个jQuery包装后的DOM对象，但后面调用的是原生DOM的append()方法。原生append()只认原生DOM元素、字符串或者文档片段，它根本不知道jQuery对象是什么，所以会把jQuery对象直接转成字符串（也就是[object Object]）插进去，而不是解析成DOM元素。

另外还有个小坑：你代码里的MouseEvent.pageX是错的，MouseEvent是构造函数，不是当前触发的事件实例，应该用事件参数里的pageX/pageY，不然拿不到正确的鼠标坐标哦。

两种解决方案 #

方案1：把jQuery对象转成原生DOM元素

用jQuery对象的[0]或者.get(0)方法，取出里面包裹的原生DOM节点，再传给原生append()：

addMarker(e){ // 这里要接收事件参数e
    var x = this.$.carDialog; 
    x.querySelector('.car-img-container').append( 
        $("<div></div>").css({ 
            position: 'absolute', 
            top: e.pageX + 'px', // 改成e.pageX
            left: e.pageY + 'px', // 改成e.pageY
            width: '10px', 
            height: '10px', 
            zIndex: '5000', 
            background: '#ff0000' 
        })[0] // 加个[0]取出原生DOM元素
    ); 
}

方案2：全程用jQuery API操作（更推荐）

既然已经用了jQuery创建元素，不如直接用jQuery的.append()方法，它能直接识别jQuery对象，代码也更简洁：

addMarker(e){ // 接收事件参数e
    // 直接把容器转成jQuery对象
    $('.car-img-container', this.$.carDialog).append( 
        $("<div></div>").css({ 
            position: 'absolute', 
            top: e.pageX + 'px', 
            left: e.pageY + 'px', 
            width: '10px', 
            height: '10px', 
            zIndex: '5000', 
            background: '#ff0000' 
        }) 
    ); 
}

额外提醒 #

别忘了确保addMarker方法是绑定在鼠标事件（比如click或mousedown）上的，这样才能拿到正确的事件参数e，不然e.pageX会报错哦。

内容的提问来源于stack exchange，提问作者R. Radio