Kesalahan: Gagal menjalankan 'appendChild' di 'Node': parameter 1 bukan dari tipe 'Node'

130

Saya mencoba untuk menarik dan melepaskan gambar pada div. Gambar tidak diseret ke div dan memberikan kesalahan berikut

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

Kode 

  <!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
sumber
5
document.getElementByIdkemungkinan kembali nol, periksa nilaidata
SmokeyPHP
1
Anda menggunakan ev.target.appendChild(document.getElementById(data));tetapi jika tidak ada elemen dengan id datamaka document.getElementByIdakan kembali null. Jadi ev.target.appendChild(null)akan melempar.
Oriol
Dikatakan Uncaught TypeError: undefined bukan functioncompare.html: 92 ondragstart
MindBrain

Jawaban:

201

Ini sebenarnya jawaban yang sederhana.

Fungsi Anda mengembalikan string daripada divsimpul. appendChildhanya dapat menambahkan simpul.

Misalnya, jika Anda mencoba menambahkanTambahkan string:

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

Kode di atas tidak akan pernah berfungsi. Apa yang akan berhasil adalah:

var z = document.createElement('p'); // is a node
z.innerHTML = 'test satu dua tiga';
document.body.appendChild(z);
Faris Rayhan
sumber
@nmnsud, itu sudah termasuk di atas dan di hampir setiap proyek saat ini.
Lodewijk
Pertanyaan buruk tetapi apakah kita harus menghapus elemen yang baru dibuat setelah menambahkan? Saya menanyakan hal ini karena dalam beberapa situasi di mana akan ada loop dan di dalam toilet akan ada opsi tambahan anak. Apakah akan ada masalah memori atau lebih banyak elemen sampah yang dibuat di dom?
Kurkula
Dalam hal ini Anda akan mendapatkan tag <p> tambahan.
Kurkula
13

Ini dapat terjadi jika Anda secara tidak sengaja menyeret elemen yang memang memiliki id yang ditetapkan (misalnya Anda menyeret elemen di sekitarnya). Dalam hal ini ID kosong dan fungsi seret () menetapkan nilai kosong yang kemudian diteruskan ke drop () dan gagal di sana.

Coba tetapkan id untuk semua elemen Anda, termasuk tds, divs, atau apa pun yang ada di sekitar elemen yang dapat diseret.

kubante
sumber
5

Dalam kasus saya, tidak ada string yang saya panggil appendChild, objek yang saya appendChildsampaikan pada argumen salah, itu adalah array dan saya telah melewati objek elemen, jadi saya menggunakan divel.appendChild(childel[0])alih-alih divel.appendChild(childel)dan itu berfungsi. Semoga ini bisa membantu seseorang.

Santosh Kumar
sumber
0

gunakan ondragstart(event)sebagai gantiondrag(event)

Nawab Ali
sumber
0

Anda juga dapat menggunakan element.insertAdjacentHTML('beforeend', data);

Silakan baca "Pertimbangan Keamanan" di MDN .

Matius
sumber