Uncaught TypeError：未能在'Node'上执行'appendChild'：参数1的类型不是'Node'.draganddrop.html：20 dropdraganddrop.html：26 [英] Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.draganddrop.html:20 dropdraganddrop.html:26 ondrop
本文介绍了Uncaught TypeError：未能在'Node'上执行'appendChild'：参数1的类型不是'Node'.draganddrop.html：20 dropdraganddrop.html：26的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正试图在div上拖放图像。图像不会被拖到div上，并给出以下错误：
未捕获TypeError：无法执行'appendChild' Node'：参数1的类型不是'Node'.draganddrop.html：20 dropdraganddrop.html：26 ondrop
代码
<！DOCTYPE HTML>
< html>
< head>
< meta charset =utf-8>
< title> Creativity Dashboard< / title>
<！ - 必需的CSS - >
< link href =css / movingboxes.css =stylesheet>
< link href =css / compare.css =stylesheet>
<！ - [if lt IE 9]>
< link href =css / movingboxes-ie.css =stylesheetmedia =screen>
<！[endif] - >
<！ - 必需的脚本 - >
< script src =http://code.jquery.com/jquery-1.8.0.min.js>< / script>
< script src =js / jquery.movingboxes.js>< / script>
<！ - - 仅限演示 - >
< link href =demo / demo.css =stylesheet>
< script src =demo / demo.js>< / script>
< script>
函数allowDrop（ev）{
ev.preventDefault（）;
}
函数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>
/ *整体&在MovingBoxes 2.2.2+版本中使用css定义的面板宽度* /
＃slider-one {
width：1003px;
}
＃slider-one> li {
width：150px;
}
< / style>
< / head>
< body>
< div class =wrapper>
<！ - Slider＃1 - >
< ul id =slider-one>
< li>< img id =drag1src =demo / 1.jpgdraggable =true
ondragstart =drag（event）alt =picture >< /锂>
< li>< img id =drag2src =demo / 2.jpgdraggable =true
ondragstart =drag（event）alt =picture >< /锂>
< li>< img id =drag3src =demo / 3.jpgdraggable =true
ondragstart =drag（event）alt =picture >< /锂>
< li>< img id =drag5src =demo / 4.jpgdraggable =true
ondragstart =drag（event）alt =picture >< /锂>
< li>< img id =drag6src =demo / 5.jpgdraggable =true
ondragstart =drag（event）alt =picture >< /锂>
< li>< img id =drag7src =demo / 6.jpgdraggable =true
ondragstart =drag（event）alt =picture id =宇航员>< / li>
< li>< img id =drag8src =demo / 7.jpgdraggable =true
ondragstart =drag（event）alt =picture >< /锂>
< / ul>
<！ - 结束Slider＃1 - >
< div id =dragAnddropondrop =drop（event）
ondragover =allowDrop（event）style =width：12em; height：12em>
< / div>
< / div>
< div>
< div class =left>
< img id =dragdraggable =trueondragstart =drag（event）
src =images / startingImage.jpgstyle =width：12em; ALT = 图片 >
< / div>
< div class =middle>
< img id =image3src =images / startingImage.jpgclass =image-size
alt =picturedraggable =trueondragstart =drag（event） > < img
src =images / harvest.jpgclass =image-sizealt =picture>
< / div>
< div class =right>
alt =picture>
< / div>
< / div>
< / body>
< / html>
解决方案
这实际上是一个简单的答案。 b
$ b
您的函数返回的是字符串而不是 div 节点。 appendChild 只能追加一个节点。
例如，如果您尝试附加字符串：
var z ='< p> test satu dua tiga< / p>'; //是一个字符串
document.body.appendChild（z）;
以上代码永远不会有效。可行的是：
var z = document.createElement（'p'）; //是一个节点
z.innerHTML ='test satu dua tiga';
document.body.appendChild（z）;
I am trying to drag and drop an image on a div. The image does not get get dragged onto the div and gives the following error
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.draganddrop.html:20 dropdraganddrop.html:26 ondrop
Code
<!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>
解决方案
It's actually a simple answer.
Your function is returning a string rather than the div node. appendChild can only append a node.
For example, if you try to appendChild the string:
var z = '<p>test satu dua tiga</p>'; // is a string
document.body.appendChild(z);
The above code will never work. What will work is:
var z = document.createElement('p'); // is a node
z.innerHTML = 'test satu dua tiga';
document.body.appendChild(z);
这篇关于Uncaught TypeError：未能在'Node'上执行'appendChild'：参数1的类型不是'Node'.draganddrop.html：20 dropdraganddrop.html：26的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
