Appending a jQuery created element to vanilla js?

Question

I need to create a new notification div when an event triggers. Normally, I would do this in jQuery and use something like $("myDiv").append(newDiv), however the item selector to be appended to can't be selected with jQuery. Below is the code to explain more.

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;
}

and

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

As you can see, the element I need to append to is actually from the event object. And if I try to append the notification from notifMaker into this, I just get [Object object] because jQuery is technically created an object in notifMaker. Is there any way around this? Any other methods I should consider using? Thanks. Here is an image of the object.

`draggableElement.append(notifMaker());` If `draggableElement` is an actual *element*, shouldn't you use standard Javascript to try to append to it, eg `appendChild`? If it's not jQuery-wrapped, `.append` won't work, right? Or, why not just wrap it with jQuery and use `append`? — CertainPerformance, Jun 20 '18 at 01:06
_"the item selector to be appended to can't be selected with jQuery"_ <- I find that unlikely — Phil, Jun 20 '18 at 01:06
IIRC, you can convert any DOM element to jQuery object, like this: `var draggableElement = $(event.relatedTarget);` and then append your div as usually. — Dan Karbayev, Jun 20 '18 at 01:07
Here is what appendChild returns - Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. — atkinsta, Jun 20 '18 at 01:08
What @DanKarbayev said, otherwise `draggableElement.appendChild(notifMaker()[0])` — Phil, Jun 20 '18 at 01:08
@DanKarbayev You are a genius. That worked perfectly. Thanks every so much. — atkinsta, Jun 20 '18 at 01:09
@atkinsta do you mind if I write this as an answer so you could accept it? because yay, internet points! :) — Dan Karbayev, Jun 20 '18 at 01:14
Possible duplicate of [How can I convert a DOM element to a jQuery element?](https://stackoverflow.com/questions/625936/how-can-i-convert-a-dom-element-to-a-jquery-element) — Heretic Monkey, Jun 20 '18 at 01:29

score 2 · Accepted Answer · answered Jun 20 '18 at 01:17

Using jQuery you can wrap any DOM element into jQuery object, so that you can use any of library methods on that element. In your case the code would look like this:

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

Appending a jQuery created element to vanilla js?

1 Answers1