错误：无法在“节点”上执行“appendChild”：参数 1 不是“节点”类型答案

【问题标题】：Error: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'错误：无法在“节点”上执行“appendChild”：参数 1 不是“节点”类型
【发布时间】：2015-01-20 16:12:38
【问题描述】：

我正在尝试将图像拖放到 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>

【问题讨论】：

document.getElementById 可能返回 null，请检查 data 的值
你使用ev.target.appendChild(document.getElementById(data));，但如果没有id为data的元素，那么document.getElementById将返回null。所以ev.target.appendChild(null) 会抛出。
它说 Uncaught TypeError: undefined is not a functioncompare.html:92 ondragstart

标签： javascript html

【解决方案1】：

其实答案很简单。

您的函数返回的是字符串而不是 div 节点。 appendChild 只能追加一个节点。

例如，如果你尝试 appendChild 字符串：

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，它包含在上面以及现在几乎每个项目中。
不好的问题，但我们必须在追加后删除新创建的元素吗？我问这个是因为在某些情况下会有一个循环并且在厕所里面会有附加子选项。会不会有内存问题或者 dom 中创建了更多的垃圾元素？
在这种情况下你会得到一个额外的
标签。

【解决方案2】：

如果您不小心没有拖动已分配 id 的元素（例如您拖动周围的元素），就会发生这种情况。在这种情况下，ID 为空，并且函数 drag() 正在分配一个空值，然后将其传递给 drop() 并在那里失败。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

在我的例子中，没有我调用appendChild的字符串，我传递appendChild参数的对象是错误的，它是一个数组并且我传递了一个元素对象，所以我使用了@987654323 @ 而不是 divel.appendChild(childel) 并且它起作用了。希望对某人有所帮助。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

对于希望使用 React 17 新的 react/jsx-transform 只使用 jsx 语法而不使用任何钩子的未来读者：

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

把你的语法改成

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

【讨论】：