javascript - 将 jQuery 创建的元素附加到 vanilla 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());
}