将 jQuery 创建的元素附加到 vanilla js？答案

【问题标题】：Appending a jQuery created element to vanilla js?将 jQuery 创建的元素附加到 vanilla js？
【发布时间】：2018-06-20 09:17:23
【问题描述】：

我需要在事件触发时创建一个新的通知 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 中创建的一个对象。有没有办法解决？我应该考虑使用其他任何方法吗？谢谢。这是对象的图像。

【问题讨论】：

draggableElement.append(notifMaker()); 如果draggableElement 是一个实际的元素，你不应该使用标准的Javascript 来尝试附加到它，例如appendChild？如果它不是 jQuery 包装的，.append 将不起作用，对吧？或者，为什么不直接用 jQuery 包装它并使用 append？
“jQuery无法选择要追加的项目选择器”
IIRC，您可以将任何 DOM 元素转换为 jQuery 对象，如下所示：var draggableElement = $(event.relatedTarget); 然后像往常一样附加您的 div。
这是 appendChild 返回的内容 - 未捕获的类型错误：无法在 'Node' 上执行 'appendChild'：参数 1 不是 'Node' 类型。
@atkinsta 你介意我把这个写成答案让你接受吗？因为是的，互联网积分！ :)

标签： javascript jquery html

【解决方案1】：

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

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

【讨论】：