Lỗi: Không thể thực thi 'appendChild' trên 'Nút': tham số 1 không thuộc loại 'Nút'

130

Tôi đang cố gắng kéo và thả hình ảnh trên div. Hình ảnh không được kéo vào div và đưa ra lỗi sau

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

Mã

  <!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

— Đầu óc
nguồn

5

document.getElementByIdcó khả năng trả về null, kiểm tra giá trị củadata

— SmokeyPHP

1

Bạn sử dụng ev.target.appendChild(document.getElementById(data));nhưng nếu không có phần tử nào có id datathì document.getElementByIdsẽ trả về null. Thế là ev.target.appendChild(null)sẽ ném.

— Oriol

Nó nói Uncaught TypeError: không xác định không phải là functioncompare.html: 92 ondragstart

— MindBrain

201

Đó thực sự là một câu trả lời đơn giản.

Hàm của bạn đang trả về một chuỗi chứ không phải là divnút. appendChildchỉ có thể nối thêm một nút.

Ví dụ: nếu bạn cố gắng chắp thêm chuỗi:

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

Các mã trên sẽ không bao giờ làm việc. Những gì sẽ làm việc là:

var z = document.createElement('p'); // is a node
z.innerHTML = 'test satu dua tiga';
document.body.appendChild(z);

— Faris Rayhan
nguồn

@nmnsud, nó được bao gồm ở trên và trong thực tế mọi dự án hiện nay.

— Lodewijk

Câu hỏi tồi nhưng chúng ta có phải loại bỏ yếu tố mới được tạo sau khi nối thêm không? Tôi đang hỏi điều này vì trong một số tình huống sẽ có một vòng lặp và bên trong loo sẽ có thêm các tùy chọn con. Sẽ có bất kỳ vấn đề bộ nhớ hoặc nhiều yếu tố rác được tạo ra trong dom?

— Kurkula

Trong trường hợp này, bạn sẽ nhận được thẻ <p> thêm.

— Kurkula

13

Điều này có thể xảy ra nếu bạn vô tình không kéo phần tử có id được gán (ví dụ: bạn đang kéo phần tử xung quanh). Trong trường hợp đó, ID trống và hàm drag () đang gán một giá trị trống sau đó được chuyển sang drop () và thất bại ở đó.

Hãy thử gán id cho tất cả các thành phần của bạn, bao gồm các tds, div hoặc bất cứ thứ gì xung quanh thành phần có thể kéo của bạn.

— kubante
nguồn

5

Trong trường hợp của tôi, không có chuỗi nào tôi đang gọi appendChild, đối tượng tôi đang truyền appendChildđối số là sai, đó là một mảng và tôi đã truyền một đối tượng phần tử, vì vậy tôi đã sử dụng divel.appendChild(childel[0])thay vì divel.appendChild(childel)và nó hoạt động. Hy vọng nó sẽ giúp được ai đó.

— Santosh Kumar
nguồn

0

sử dụng ondragstart(event)thay vìondrag(event)

— Nawab Ali
nguồn

0

Bạn cũng có thể sử dụng element.insertAdjacentHTML('beforeend', data);

Vui lòng đọc " Cân nhắc bảo mật" trên MDN .

— Matthew
nguồn