JavaScript Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

[ppowell777]

I am trying to be more consistent in using jQuery as much as possible, and I am trying to fix a drop(event) function I wrote that drops an image into a container. It works whenever I use the old DOM standard evt.target.appendChild(document.getElementById(data));, but it fails whenever I try to use a jQuery object and extract the DOM object from the jQuery object:

function drop(evt) {
    try {
        evt.preventDefault();
        const data = evt.dataTransfer.getData('text');
        //evt.target.appendChild(document.getElementById(data)); <-- This works
        evt.target.appendChild($(`#${data}`).get(0));           // This doesn't work
    } catch (e) {
        console.log(`Unable to run drop(): ${e.message}`);
    }
}

Does anyone have any idea how to best handle this other than rolling back to DOM object notation and having inconsistently written Javascript code?

Thanks

 

[ppowell777]

I figured it out myself:

function drop(evt) {
    try {
        evt.preventDefault();
        const data = evt.dataTransfer.getData('text');
        evt.target.appendChild($(`#${data}`).get(0));
    } catch (e) {
        console.log(`Unable to run drop(): ${e.message}`);
    }
}