将jQuery创建的元素附加到普通js吗？

Question

事件触发时，我需要创建一个新的通知div。通常，我会在jQuery中执行此操作，并使用类似$("myDiv").append(newDiv)的方法，但是要附加到项目选择器的对象不能用jQuery选择。下面是解释更多代码的代码。

function notifMaker() {
    var notification = $("<div>").addClass("notification", "id-dark", "overtop");
    var notifButton = $("<button>").addClass("delete");
    notification.append(notifButton);
    notification.text("You've already saved this item. Click the x button to remove it from saved items.");
    return notification;
}

和

    ondragleave: function (event) {
        // console.log("Drag Leave");
        var draggableElement = event.relatedTarget;
        // console.log(notifMaker());
        draggableElement.append(notifMaker());
},

如您所见，我需要附加的元素实际上来自事件对象。而且，如果我尝试将来自notifMaker的通知附加到该通知中，我只会得到[Object object]，因为从技术上讲jQuery是在notifMaker中创建的。有没有办法解决？我应该考虑使用其他方法吗？谢谢。这是物体的图像。

Answer 1

使用jQuery可以将任何DOM元素包装到jQuery对象中，以便可以在该元素上使用任何库方法。在您的情况下，代码如下所示：

ondragleave: function (event) {
    var draggableElement = $(event.relatedTarget);
    draggableElement.append(notifMaker());
}