Fehler: Fehler beim Ausführen von 'appendChild' auf 'Node': Parameter 1 ist nicht vom Typ 'Node'.

130

Ich versuche, ein Bild auf ein Div zu ziehen und dort abzulegen. Das Bild wird nicht auf das div gezogen und gibt den folgenden Fehler aus

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
quelle
5
document.getElementByIdwird wahrscheinlich null zurückgeben, überprüfen Sie den Wert vondata
SmokeyPHP
1
Sie verwenden , ev.target.appendChild(document.getElementById(data));aber wenn es kein Element mit der ID ist datadann document.getElementByIdzurückkehren wird null. Also ev.target.appendChild(null)werde werfen.
Oriol
Es heißt Uncaught TypeError: undefined ist keine functioncompare.html: 92 ondragstart
MindBrain

Antworten:

201

Es ist eigentlich eine einfache Antwort.

Ihre Funktion gibt eher eine Zeichenfolge als den divKnoten zurück. appendChildkann nur einen Knoten anhängen.

Wenn Sie beispielsweise versuchen, die Zeichenfolge anzuhängen, erstellen Sie Folgendes:

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

Der obige Code wird niemals funktionieren. Was funktionieren wird ist:

var z = document.createElement('p'); // is a node
z.innerHTML = 'test satu dua tiga';
document.body.appendChild(z);
Faris Rayhan
quelle
@nmnsud, es ist heutzutage in praktisch jedem Projekt enthalten.
Lodewijk
Schlechte Frage, aber müssen wir das neu erstellte Element nach dem Anhängen entfernen? Ich frage dies, da in einigen Situationen, in denen es eine Schleife gibt und im Klo untergeordnete Optionen angehängt werden. Wird es ein Speicherproblem oder mehr Müllelemente geben, die in dom erstellt wurden?
Kurkula
In diesem Fall erhalten Sie ein zusätzliches <p> -Tag.
Kurkula
13

Dies kann passieren, wenn Sie versehentlich nicht das Element ziehen, dem eine ID zugewiesen wurde (z. B. das umgebende Element). In diesem Fall ist die ID leer und die Funktion drag () weist einen leeren Wert zu, der dann an drop () übergeben wird und dort fehlschlägt.

Versuchen Sie, die IDs allen Ihren Elementen zuzuweisen, einschließlich der tds, divs oder was auch immer sich um Ihr ziehbares Element befindet.

Kubante
quelle
5

In meinem Fall gab es keine Zeichenfolge, die ich aufrief appendChild, das Objekt, das ich als appendChildArgument weitergab, war falsch, es war ein Array und ich hatte ein Elementobjekt übergeben, also habe ich divel.appendChild(childel[0])stattdessen verwendet divel.appendChild(childel)und es hat funktioniert. Hoffe es hilft jemandem.

Santosh Kumar
quelle
0

verwenden ondragstart(event)stattondrag(event)

Nawab Ali
quelle
0

Sie können auch verwenden element.insertAdjacentHTML('beforeend', data);

Bitte lesen Sie die "Sicherheitsüberlegungen" auf MDN .

Matthew
quelle