오류: '노드'에서 'appendChild'를 실행하지 못했습니다. 매개 변수 1이 '노드' 유형이 아닙니다.
디브에 이미지를 드래그 앤 드롭하려고 합니다.영상이 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>
그것은 사실 간단한 대답입니다.
함수가 다음이 아닌 문자열을 반환합니다.div노드appendChild노드만 추가할 수 있습니다.
예를 들어 Child 문자열을 추가하려고 하면 다음과 같습니다.
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);
ID가 할당된 요소를 잘못 끌지 않은 경우(예: 주변 요소를 끌 때) 이 문제가 발생할 수 있습니다.이 경우 ID가 비어 있고 drag() 함수가 빈 값을 할당하고 있으며 이 값은 drop()으로 전달되고 여기서 실패합니다.
tds, div 또는 드래그 가능한 요소 주변의 모든 요소에 ID를 할당합니다.
다음을 사용할 수도 있습니다.element.insertAdjacentHTML('beforeend', data);
MDN의 "보안 고려사항"을 읽어보십시오.
제 경우에는, 제가 호출하는 문자열이 없었습니다.appendChild내가 건네주고 있던 물건appendChild인수가 틀렸습니다. 배열이었고 요소 객체를 전달했기 때문에 사용했습니다.divel.appendChild(childel[0])대신에divel.appendChild(childel)그리고 그것은 성공하였다.누군가에게 도움이 되길 바랍니다.
사용하다ondragstart(event)대신에ondrag(event)
이후 React 17 new react/jsx-transform을 사용하여 후크 없이 jsx 구문만 사용하고자 하는 독자를 위해:
제거 응답:
npm uninstall react당신의 것
react-dom바벨 구성 업데이트.추가:
plugins: [ ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }], ]참고: 대체할 수 있습니다.
@babel/preset-react와 함께@babel/plugin-transform-react-jsx이 코드에 표시된 바와 같이.구문을 로 변경합니다.
ReactDOM.render(<Comp/>, document.getElementById('fuc_'))
언급URL : https://stackoverflow.com/questions/27079598/error-failed-to-execute-appendchild-on-node-parameter-1-is-not-of-type-no
'programing' 카테고리의 다른 글
| Hibernate가 생성된 쿼리에서 사용하는 SQL 테이블 별칭을 제어하려면 어떻게 해야 합니까? (0) | 2023.07.26 |
|---|---|
| 노드의 child_process를 약속하는 방법.exec 및 child_process.Bluebird에서 execFile 기능을 사용하시겠습니까? (0) | 2023.07.26 |
| 예외 없이 트랜잭션 롤백을 수행하시겠습니까? (0) | 2023.07.26 |
| Python 개체에 대한 복사/딥 복사 작업을 재정의하는 방법은 무엇입니까? (0) | 2023.07.26 |
| 정의되지 않은 메트릭 경고: F-점수가 잘못 정의되었으며 예측된 샘플이 없는 레이블에서 0.0으로 설정되었습니다. (0) | 2023.07.26 |