Error Failed to execute appendChild on Node parameter 1 is not of type Node

Question

I am trying to drag and drop an image on a div  The image does not get get dragged onto the div and gives the following error  Uncaught TypeError  Failed to execute  appendChild  on  Node   parameter 1 is not of type  Node  draganddrop html 20 dropdraganddrop html 26 ondrop   Code      lt  DOCTYPE HTML gt     lt html gt        lt head gt           lt meta charset  utf-8  gt           lt title gt Creativity Dashboard lt  title gt            lt  -- Required CSS -- gt           lt link href  css movingboxes css  rel  stylesheet  gt           lt link href  css compare css  rel  stylesheet  gt            lt  -- if lt IE 9  gt              lt link href  css movingboxes-ie css  rel  stylesheet  media  screen  gt           lt   endif -- gt            lt  -- Required script -- gt           lt script src  http   code jquery com jquery-1 8 0 min js  gt  lt  script gt           lt script src  js jquery movingboxes js  gt  lt  script gt            lt  -- Demo only -- gt           lt link href  demo demo css  rel  stylesheet  gt           lt script src  demo demo js  gt  lt  script gt            lt script gt             function allowDrop ev                  ev preventDefault                             function drag ev                  ev dataTransfer setData  text   ev target id                            function drop ev                  ev preventDefault                  var data   ev dataTransfer getData  text                  ev target appendChild document getElementById data                          lt  script gt           lt style gt                Overall  amp  panel width defined using css in MovingBoxes version 2 2 2                 slider-one                 width  1003px                            slider-one gt li                 width  150px                        lt  style gt        lt  head gt         lt body gt           lt div class  wrapper  gt              lt  -- Slider  1 -- gt              lt ul id  slider-one  gt                  lt li gt  lt img id  drag1  src  demo 1 jpg  draggable  true                   ondragstart  drag event   alt  picture  gt  lt  li gt                  lt li gt  lt img id  drag2  src  demo 2 jpg  draggable  true                   ondragstart  drag event   alt  picture  gt  lt  li gt                  lt li gt  lt img id  drag3  src  demo 3 jpg  draggable  true                   ondragstart  drag event   alt  picture  gt  lt  li gt                  lt li gt  lt img id  drag5  src  demo 4 jpg  draggable  true                   ondragstart  drag event   alt  picture  gt  lt  li gt                  lt li gt  lt img id  drag6  src  demo 5 jpg  draggable  true                   ondragstart  drag event   alt  picture  gt  lt  li gt                  lt li gt  lt img id  drag7  src  demo 6 jpg  draggable  true                   ondragstart  drag event   alt  picture  id  astronaut  gt  lt  li gt                  lt li gt  lt img id  drag8  src  demo 7 jpg  draggable  true                   ondragstart  drag event   alt  picture  gt  lt  li gt               lt  ul gt              lt  -- end Slider  1 -- gt              lt div id  dragAnddrop  ondrop  drop event                 ondragover  allowDrop event   style  width  12em  height  12em  gt              lt  div gt           lt  div gt            lt div gt              lt div class  left  gt                 lt img id  drag  draggable  true  ondragstart  drag event                    src  images startingImage jpg  style  width  12em   alt  picture  gt               lt  div gt              lt div class  middle   gt                 lt img id  image3  src  images startingImage jpg  class  image-size                   alt  picture  draggable  true  ondragstart  drag event   gt   lt img                  src  images harvest jpg  class  image-size  alt  picture  gt              lt  div gt              lt div class  right  gt                 lt img src  images startingImage jpg  style  width  12em                    alt  picture  gt              lt  div gt           lt  div gt        lt  body gt     lt  html gt

User · Answer

use ondragstart event  instead of ondrag event

User · Answer

You may also use element insertAdjacentHTML  beforeend   data    Please read the  Security considerations  on MDN

User · Answer

In my case  there was no string on which i was calling appendChild  the object i was passing on appendChild argument was wrong  it was an array and i had pass an element object  so i used divel appendChild childel 0   instead of divel appendChild childel  and it worked  Hope it help someone

User · Answer

It s actually a simple answer   Your function is returning a string rather than the div node  appendChild can only append a node    For example  if you try to appendChild the string   var z     lt p gt test satu dua tiga lt  p gt       is a string  document body appendChild z     The above code will never work  What will work is   var z   document createElement  p       is a node z innerHTML    test satu dua tiga   document body appendChild z

User · Answer

This can happen if you accidentally are not dragging the element that does have an id assigned  for example you are dragging the surrounding element   In that case the ID is empty and the function drag   is assigning an empty value which is then passed to drop   and fails there    Try assigning the ids to all of your elements  including the tds  divs  or whatever is around your draggable element

[javascript] Error: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

Examples related to javascript

Examples related to html