ข้อผิดพลาด: ไม่สามารถเรียกใช้งาน 'appendChild' บน 'Node': พารามิเตอร์ 1 ไม่ใช่ประเภท 'Node'

130

ฉันพยายามลากและวางรูปภาพบน div ภาพไม่ถูกลากไปยัง div และแสดงข้อผิดพลาดต่อไปนี้

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

รหัส

  <!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
แหล่งที่มา

5

document.getElementByIdมีแนวโน้มที่จะคืนค่าว่างให้ตรวจสอบค่าของdata

— SmokeyPHP

1

คุณสามารถใช้ev.target.appendChild(document.getElementById(data));แต่ถ้ามีองค์ประกอบใด ๆ กับ ID dataแล้วจะกลับมาdocument.getElementById nullจึงev.target.appendChild(null)จะโยน.

— Oriol

มันบอกว่า Uncaught TypeError: undefined ไม่ใช่ functioncompare.html: 92 ondragstart

— MindBrain

201

มันเป็นคำตอบง่ายๆ

ฟังก์ชันของคุณส่งคืนสตริงแทนที่จะเป็นdivโหนด appendChildสามารถต่อท้ายโหนดเท่านั้น

ตัวอย่างเช่นหากคุณพยายามผนวกสตริงเด็ก:

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

รหัสด้านบนจะไม่ทำงาน สิ่งที่จะทำงานคือ:

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

— ฟาริสเรย์ฮาน
แหล่งที่มา

@nmnsud รวมไว้ด้านบนและในทุกโครงการในปัจจุบัน

— Lodewijk

คำถามไม่ดี แต่เราต้องลบองค์ประกอบที่สร้างขึ้นใหม่หลังจากต่อท้ายหรือไม่? ฉันกำลังถามสิ่งนี้ในบางสถานการณ์ที่จะมีการวนซ้ำและภายในลูจะมีตัวเลือกเด็กต่อท้าย จะมีปัญหาหน่วยความจำหรือองค์ประกอบขยะที่สร้างขึ้นใน dom หรือไม่?

— Kurkula

ในกรณีนี้คุณจะได้รับแท็ก <p> พิเศษ

— Kurkula

13

สิ่งนี้สามารถเกิดขึ้นได้หากคุณไม่ได้ลากองค์ประกอบที่มีการกำหนดรหัสโดยไม่ได้ตั้งใจ (เช่นคุณกำลังลากองค์ประกอบรอบ ๆ ) ในกรณีนั้น ID ว่างและฟังก์ชัน drag () กำลังกำหนดค่าว่างซึ่งจะถูกส่งไปที่ drop () และล้มเหลวที่นั่น

ลองกำหนดรหัสให้กับองค์ประกอบทั้งหมดของคุณรวมถึง tds, divs หรืออะไรก็ตามที่อยู่รอบ ๆ องค์ประกอบที่ลากได้ของคุณ

— kubante
แหล่งที่มา

5

ในกรณีของฉันไม่มีสตริงที่ฉันเรียกappendChildวัตถุที่ฉันส่งผ่านappendChildอาร์กิวเมนต์ผิดมันเป็นอาร์เรย์และฉันได้ส่งผ่านวัตถุองค์ประกอบดังนั้นฉันจึงใช้divel.appendChild(childel[0])แทนdivel.appendChild(childel)และใช้งานได้ หวังว่ามันจะช่วยใครสักคน

— Santosh Kumar
แหล่งที่มา

0

ใช้ondragstart(event)แทนondrag(event)

— มหาเศรษฐีอาลี
แหล่งที่มา

0

คุณยังสามารถใช้ element.insertAdjacentHTML('beforeend', data);

โปรดอ่าน "การพิจารณาการรักษาความปลอดภัย" ในMDN

— แมทธิว
แหล่งที่มา