错误: 未能在‘ Node’上执行‘阑尾 Child’: 参数1不是‘ Node’类型

我正试图在 div 上拖放一个图像。图像不会被拖放到 div 上，并且会出现以下错误

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

< p > 密码

  <!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>

437398

小开

如果您意外地没有拖动确实分配了 id 的元素(例如，您正在拖动周围的元素) ，就会发生这种情况。在这种情况下，ID 是空的，函数 drag ()正在分配一个空值，然后传递给 drop ()并在那里失败。

尝试将 id 分配给所有元素，包括 tds、 div 或可拖动元素周围的其他元素。

小开

其实答案很简单。

函数返回的是字符串而不是 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);

小开

在我的例子中，我没有调用 appendChild的字符串，我在 appendChild参数上传递的对象是错误的，它是一个数组，我传递了一个元素对象，所以我使用 divel.appendChild(childel[0])而不是 divel.appendChild(childel)，它工作了。希望能帮到别人。

小开

使用 ondragstart(event)代替 ondrag(event)

小开

您也可以使用 element.insertAdjacentHTML('beforeend', data);

请阅读 MDN上的“安全注意事项”。

小开

对于那些希望使用 React 17 new response/jsx-change 仅仅使用 jsx 语法而不使用任何钩子的未来读者:

通过 npm uninstall react卸载反应
保持你的 react-dom
更新 babel 配置，添加:
```
plugins: [
['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }],
]
```
注意: 您可以用 @babel/plugin-transform-react-jsx代替 @babel/preset-react，如代码中所示。

将您的语法更改为

ReactDOM.render(<Comp/>, document.getElementById('fuc_'))