Erreur: échec de l'exécution de 'appendChild' sur 'Node': le paramètre 1 n'est pas de type 'Node'

130

J'essaye de faire glisser et déposer une image sur un div. L'image ne se fait pas glisser sur le div et donne l'erreur suivante

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>
javascript html MindBrain
la source
5
document.getElementByIdrenvoie probablement null, vérifiez la valeur dedata
SmokeyPHP
1
Vous utilisez ev.target.appendChild(document.getElementById(data));mais s'il n'y a pas d'élément avec l'ID, dataalors document.getElementByIdretournera null. Alors ev.target.appendChild(null)va jeter.
Oriol
Il dit Uncaught TypeError: undefined n'est pas une functioncompare.html: 92 ondragstart
MindBrain

Réponses:

201

C'est en fait une réponse simple.

Votre fonction renvoie une chaîne plutôt que le divnœud. appendChildne peut ajouter qu'un nœud.

Par exemple, si vous essayez d'appendChild la chaîne:

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

Le code ci-dessus ne fonctionnera jamais. Ce qui fonctionnera est:

var z = document.createElement('p'); // is a node
z.innerHTML = 'test satu dua tiga';
document.body.appendChild(z);
Faris Rayhan
la source
@nmnsud, il est inclus ci-dessus et dans pratiquement tous les projets de nos jours.
Lodewijk
Mauvaise question mais devons-nous supprimer l'élément nouvellement créé après l'ajout? Je pose cette question car dans certaines situations où il y aura une boucle et à l'intérieur des toilettes, il y aura des options enfant ajoutées. Y aura-t-il un problème de mémoire ou plus d'éléments de déchets créés dans dom?
Kurkula
Dans ce cas, vous obtiendrez une balise <p> supplémentaire.
Kurkula
13

Cela peut se produire si vous ne faites pas glisser accidentellement l'élément auquel un identifiant est attribué (par exemple, vous faites glisser l'élément environnant). Dans ce cas, l'ID est vide et la fonction drag () attribue une valeur vide qui est ensuite passée à drop () et y échoue.

Essayez d'attribuer les identifiants à tous vos éléments, y compris les tds, divs ou tout ce qui se trouve autour de votre élément déplaçable.

kubante
la source
5

Dans mon cas, il n'y avait pas de chaîne sur laquelle j'appelais appendChild, l'objet que je passais en appendChildargument était faux, c'était un tableau et j'avais passé un objet élément, alors j'ai utilisé à la divel.appendChild(childel[0])place divel.appendChild(childel)et cela a fonctionné. J'espère que cela aidera quelqu'un.

Santosh Kumar
la source
0

utiliser ondragstart(event)au lieu deondrag(event)

Nawab Ali
la source
0

Vous pouvez également utiliser element.insertAdjacentHTML('beforeend', data);

Veuillez lire les «considérations de sécurité» sur MDN .

Matthieu
la source