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

  <!DOCTYPE HTML>
  <html>
     <head>
        <meta charset="utf-8">
        <title>Creativity Dashboard</title>

        <!-- Required CSS -->
        <link href="css/movingboxes.css" rel="stylesheet">
        <link href="css/compare.css" rel="stylesheet">

        <!--[if lt IE 9]>
           <link href="css/movingboxes-ie.css" rel="stylesheet" media="screen">
        <![endif]-->

        <!-- Required script -->
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script src="js/jquery.movingboxes.js"></script>

        <!-- Demo only -->
        <link href="demo/demo.css" rel="stylesheet">
        <script src="demo/demo.js"></script>

        <script>
           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));
           }
        </script>
        <style>
           /* Overall & panel width defined using css in MovingBoxes version 2.2.2+ */
           #slider-one {
              width: 1003px;
           }

           #slider-one>li {
              width: 150px;
           }
        </style>
     </head>

     <body>
        <div class="wrapper">
           <!-- Slider #1 -->
           <ul id="slider-one">

              <li><img id="drag1" src="demo/1.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag2" src="demo/2.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag3" src="demo/3.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag5" src="demo/4.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag6" src="demo/5.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag7" src="demo/6.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture" id="astronaut"></li>

              <li><img id="drag8" src="demo/7.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

           </ul>
           <!-- end Slider #1 -->
           <div id="dragAnddrop" ondrop="drop(event)"
              ondragover="allowDrop(event)" style="width: 12em; height: 12em">
           </div>
        </div>

        <div>
           <div class="left">
              <img id="drag" draggable="true" ondragstart="drag(event)"
                 src="images/startingImage.jpg" style="width: 12em;" alt="picture">

           </div>
           <div class="middle ">
              <img id="image3" src="images/startingImage.jpg" class="image-size"
                 alt="picture" draggable="true" ondragstart="drag(event)"> <img
                 src="images/harvest.jpg" class="image-size" alt="picture">
           </div>
           <div class="right">
              <img src="images/startingImage.jpg" style="width: 12em;"
                 alt="picture">
           </div>
        </div>
     </body>
  </html>

`document.getElementById` is likely returning null, check the value of `data` — MDEV, Nov 22 '14 at 16:24
You use `ev.target.appendChild(document.getElementById(data));` but if there is no element with id `data` then `document.getElementById` will return `null`. So `ev.target.appendChild(null)` will throw. — Oriol, Nov 22 '14 at 16:25
It says Uncaught TypeError: undefined is not a functioncompare.html:92 ondragstart — MindBrain, Nov 22 '14 at 16:32
For those who were searching for an exact answer in one go: [Appending HTML using native JavaScript](https://stackoverflow.com/questions/42517697/appending-html-using-native-javascript) — Shamiq, Sep 28 '22 at 20:06

score 344 · Answer 1 · edited May 08 '18 at 14:51

344

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 = '<p>test satu dua tiga</p>'; // 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);

edited May 08 '18 at 14:51

Community

1
1

answered Aug 04 '15 at 04:35

Faris Rayhan

4,500
1
22
19

@nmnsud, it is included above and in practically every project nowadays. – Lodewijk Feb 26 '17 at 13:10
1

Bad question but do we have to remove the newly created element after appending? I am asking this as in some situations where there will be a loop and inside loo there will be append child options. Will there be any memory issue or more garbage elements created in dom ? – Kurkula Nov 20 '17 at 19:26
1

In this case you will get a extra
tag.
– Kurkula Nov 21 '17 at 21:04

score 17 · Answer 2 · answered May 14 '15 at 13:30

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.

score 13 · Answer 3 · answered Mar 23 '20 at 05:14

13

You may also use element.insertAdjacentHTML('beforeend', data);

Please read the "Security considerations" on MDN.

answered Mar 23 '20 at 05:14

Matthew

10,988
11
54
69

score 11 · Answer 4 · edited Feb 25 '19 at 13:26

11

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.

edited Feb 25 '19 at 13:26

Adrita Sharma

21,581
10
69
79

answered Jun 11 '18 at 06:41

Santosh Kumar

205
2
6

score 0 · Answer 5 · edited Dec 03 '19 at 14:19

0

use ondragstart(event) instead of ondrag(event)

edited Dec 03 '19 at 14:19

ascripter

5,665
12
45
68

answered Dec 02 '19 at 12:08

Nawab Ali

176
2
7

score 0 · Answer 6 · answered Feb 21 '22 at 01:37

For future readers who want to use React 17 new react/jsx-transform to just use jsx syntax without using any hook:

uninstall react via npm uninstall react
keep your react-dom
update babel config. Add:
```
plugins: [
  ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }],
]
```
note: you can replace @babel/preset-react with @babel/plugin-transform-react-jsx, as indicated in this code.

change your syntax to

ReactDOM.render(<Comp/>, document.getElementById('fuc_'))

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

6 Answers6

Linked

Related