javascript - 尝试 append div - 结果为 [object Object]

Question

我试图 append 一个 div，但它只 append 一个带有 [object Object] 的文本字符串。所以它 append 了一些东西，但不是我想要的 div。

addMarker(){
            var x = this.$.carDialog;
                x.querySelector('.car-img-container').append(
                     $("<div></div>").css({
                         position: 'absolute',
                         top: MouseEvent.pageX + 'px',
                         left: MouseEvent.pageY + 'px',
                         width: '10px',
                         height: '10px',
                         zIndex: '5000',
                         background: '#ff0000'
                     })

                 );                
        }

Answer 1

您正在混合 jQuery 和普通 JavaScript 来进行 DOM 操作。这通常是一个坏主意。

由于您创建<div>的方式，我只想使用 jQuery:

$(x).find('.car-img-container').append(/* div code here */);

如果您使用 querySelector() 中的那个，期待实际的 NodeElement 。当你给它jQuery时，这是一个对象，它被转换为字符串 [object Object]并 append 为 TextNode .

如果您想走这条路，您也可以使用 get(0) jQuery 函数:

x.querySelector('.car-img-container').appendChild($('<div></div>).get(0));