Error: Error al ejecutar 'appendChild' en 'Nodo': el parámetro 1 no es del tipo 'Nodo'

130

Estoy tratando de arrastrar y soltar una imagen en un div. La imagen no se arrastra al div y da el siguiente error

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

Código 

  <!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>
javascript html MindBrain
fuente
55
document.getElementByIdes probable que regrese nulo, verifique el valor dedata
SmokeyPHP
1
Usas ev.target.appendChild(document.getElementById(data));pero si no hay ningún elemento con id, dataentonces document.getElementByIdregresará null. Así ev.target.appendChild(null)lo lanzará.
Oriol
Dice Uncaught TypeError: undefined no es una funcióncompare.html: 92 ondragstart
MindBrain

Respuestas:

201

En realidad es una respuesta simple.

Su función está devolviendo una cadena en lugar del divnodo. appendChildsolo puede agregar un nodo.

Por ejemplo, si intentas agregarChild la cadena:

var z = '<p>test satu dua tiga</p>'; // is a string 
document.body.appendChild(z);

El código anterior nunca funcionará. Lo que funcionará es:

var z = document.createElement('p'); // is a node
z.innerHTML = 'test satu dua tiga';
document.body.appendChild(z);
Faris Rayhan
fuente
@nmnsud, se incluye arriba y en prácticamente todos los proyectos hoy en día.
Lodewijk
Mala pregunta, pero ¿tenemos que eliminar el elemento recién creado después de agregar? Pregunto esto ya que en algunas situaciones donde habrá un bucle y dentro del retrete habrá opciones secundarias para agregar. ¿Habrá algún problema de memoria o más elementos basura creados en dom?
Kurkula
En este caso, obtendrá una etiqueta <p> adicional.
Kurkula
13

Esto puede suceder si accidentalmente no está arrastrando el elemento que tiene una identificación asignada (por ejemplo, está arrastrando el elemento circundante). En ese caso, la ID está vacía y la función drag () está asignando un valor vacío que luego se pasa a drop () y falla allí.

Intente asignar los identificadores a todos sus elementos, incluidos los tds, divs o lo que esté alrededor de su elemento arrastrable.

kubante
fuente
5

En mi caso, no había una cadena en la que estaba llamando appendChild, el objeto que estaba pasando en el appendChildargumento estaba equivocado, era una matriz y había pasado un objeto elemento, así que usé en divel.appendChild(childel[0])lugar de divel.appendChild(childel)y funcionó. Espero que ayude a alguien.

Santosh Kumar
fuente
0

usar en ondragstart(event)lugar deondrag(event)

Nawab Ali
fuente
0

También puedes usar element.insertAdjacentHTML('beforeend', data);

Lea las "Consideraciones de seguridad" en MDN .

Mateo
fuente