오류 : '노드'에서 'appendChild'를 실행하지 못했습니다. 매개 변수 1이 '노드'유형이 아닙니다.

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가능성이 널 (null)을 반환의 값 확인data

— SmokeyPHP

1

당신은 사용 ev.target.appendChild(document.getElementById(data));하지만 요소 ID로가없는 경우 data다음 document.getElementById반환합니다 null. 그래서 ev.target.appendChild(null)발생합니다.

— Oriol

Uncaught TypeError : undefined is a functioncompare.html : 92 ondragstart

— MindBrain

201

실제로 간단한 대답입니다.

함수가 div노드가 아닌 문자열을 반환 합니다. appendChild노드 만 추가 할 수 있습니다.

예를 들어, 문자열을 childChild에 추가하려고하면 :

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가 할당 된 요소를 드래그하지 않는 경우 (예 : 주변 요소를 드래그하는 경우) 발생할 수 있습니다. 이 경우 ID가 비어 있고 함수 drag ()가 빈 값을 할당 한 다음 drop ()에 전달되어 실패합니다.

td, div 또는 드래그 가능한 요소 주위의 모든 것을 포함하여 모든 요소에 ID를 할당하십시오.

— 쿠반 테
소스

5

내 경우에는 내가 호출 한 문자열이 없었고 인수를 appendChild전달하는 객체 appendChild가 잘못되었습니다. 배열이었고 요소 객체를 전달했기 때문에 divel.appendChild(childel[0])대신 사용 divel.appendChild(childel)했으며 작동했습니다. 그것이 누군가를 돕기를 바랍니다.

— 산토 쉬 쿠마르
소스

0

ondragstart(event)대신에 사용ondrag(event)

— 나 브브 알리
소스

0

당신은 또한 사용할 수 있습니다 element.insertAdjacentHTML('beforeend', data);

MDN 의 "보안 고려 사항"을 읽으십시오 .

— 매튜
소스