Javascript 错误：无法在“节点”上执行“appendChild”：参数 1 的类型不是“节点”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27079598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
提问by MindBrain
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
我正在尝试将图像拖放到 div 上。图像没有被拖到 div 上并给出以下错误
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>
回答by Faris Rayhan
It's actually a simple answer.
这实际上是一个简单的答案。
Your function is returning a string rather than the divnode. appendChildcan only append a node.
您的函数返回的是字符串而不是div节点。appendChild只能追加一个节点。
For example, if you try to appendChild the string:
例如，如果您尝试 appendChild 字符串：
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);
回答by kubante
This can happen if you accidentally are not dragging the element that does have an id assigned (for example you are dragging the surrounding element). In that case the ID is empty and the function drag() is assigning an empty value which is then passed to drop() and fails there.
如果您不小心没有拖动分配了 id 的元素（例如，您正在拖动周围的元素），就会发生这种情况。在这种情况下，ID 为空，并且函数 drag() 分配了一个空值，然后将其传递给 drop() 并在那里失败。
Try assigning the ids to all of your elements, including the tds, divs, or whatever is around your draggable element.
尝试将 id 分配给所有元素，包括 tds、div 或可拖动元素周围的任何内容。
回答by Santosh Kumar
In my case, there was no string on which i was calling appendChild, the object i was passing on appendChildargument was wrong, it was an array and i had pass an element object, so i used divel.appendChild(childel[0])instead of divel.appendChild(childel)and it worked. Hope it help someone.
在我的情况下，没有我正在调用的字符串，我appendChild传递appendChild参数的对象是错误的，它是一个数组并且我传递了一个元素对象，所以我使用了divel.appendChild(childel[0])而不是divel.appendChild(childel)并且它起作用了。希望它可以帮助某人。
回答by Nawab Ali
use ondragstart(event)instead of ondrag(event)
使用ondragstart(event)代替ondrag(event)
