• Register
0 votes

Problem :

I want to drag and drop the image on the div. The image does not get dragged onto a div and gives the below error :

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.draganddrop.html:20 dropdraganddrop.html:26 ondrop


7 5 2
3,870 points

Please log in or register to answer this question.

1 Answer

0 votes

Solution :

It has actually a very simple answer.

The function is returning the string rather than a div node. appendChild can only append the node.

So for example, if you try to do just appendChild the string:

var s = '<p>test satu dua tiga</p>'; // is the string 

This above code will never work. What will work is as below:

var s = document.createElement('p'); // is the node
s.innerHTML = 'test satu dua tiga';



This will happen if you accidentally are not dragging a element that does have the id assigned (example you are dragging a surrounding element). In that case an ID is empty and your function drag() is assigning an empty value which is then passed to the drop() and it fails there.

So you should try assigning the ids to all of your elements, including your tds, divs, or whatever is around the draggable element.

Hope above solutions will fix your issue.

9 7 4
38,600 points

Related questions

1 vote
1 answer 522 views
Problem : Trying to drag and drop an image on a div. but the image does not get dragged on to the div and gives the following error: uncaught typeerror: failed to execute 'appendchild' on 'node': parameter 1 is not of type 'node'.
asked Nov 11, 2019 peterlaw 6.9k points
0 votes
1 answer 1K views
Problem : Facing following javascript issue failed to execute 'removechild' on 'node': the node to be removed is not a child of this node.
asked Nov 14, 2019 peterlaw 6.9k points
0 votes
1 answer 379 views
Problem : I am unable to solve my link problem. Can anybody help on to this to link the CSS and JS File? I am facing below error : Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/RetailSmart/jsp/ ... .js Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/RetailSmart/jsp/Jquery/prettify.js
asked Jan 10, 2020 alecxe 7.5k points
0 votes
1 answer 271 views
Problem : I want to save my canvas to a img. I have this function: function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document. ... error: Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. What should I do?
asked Nov 21, 2019 peterlaw 6.9k points
0 votes
1 answer 131 views
Problem : I have the javascript application and when I try to run it on firefox I am facing the below error on the console: &ldquo;Because its mime type ('text/html') is not a supported stylesheet mime type&rdquo; Now I am completely confused because of this error. Kindly somebody let me know how can I resolve my above error?
asked Jan 29, 2020 jwilliam 3.9k points
0 votes
0 answers 23 views
0 votes
1 answer 8 views
Problem: I would like to pass a parameter (i.e. string) to the Onclick function. At the moment I am doing this: '<input type="button" onClick="gotoNode(' + result.name + ')" />' with result.name, for example, equal to the string "Add". When I click ... works fine with a numeric parameter, I assume it has something to do with the "" characters in the string. Has anyone had this problem before?
asked Dec 1, 2020 sasha 5.3k points
0 votes
1 answer 6 views
Problem: I need to pass some values to the javascript function. And this function will perform perform also an ajax call. Plase see my code thus far: <form method="post" action="locatemembers.php" id="myform">     <label for="first_name">First Name : </label>     <input type="text" name=" ... status, error) {                 alert(request.responseText);             }         });     } </script>
asked Nov 4, 2020 robin_gallo 420 points
0 votes
1 answer 8 views
I am finding difficulty how to check radio button is checked applying Jquery. Is there any one here give me the hint?
asked Sep 25, 2020 Daniel Anderson 4k points
0 votes
1 answer 19 views
Problem: I have recently started learning JQuery for my new project. I am the only developer in my team. I am trying to check if the checkbox in my checkbox array is checked using a id of my checkbox array? I have already written a code for it. Please find below my code ... { return false; } else { return true; } } I am looking for the Jquery expert who can help me in fixing my above JQuery code.
asked Jul 13, 2020 Raphael Pacheco 4.9k points