TypeError: Failed to execute 'appendChild'on 'No

Not able to resolve :Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

本文关键字:appendChild on No Failed execute TypeError to      更新时间:2023-09-26

我试过在类似的问题中寻找答案,但我无法解决,我知道错误是由于jquery,DOM转换,但我无法解决这个问题,我试过使用append();而不是appendChild();。我试图实现拖放功能。

这是我的javascript:(注释是我尝试过的方法)

$('#todo, #inprog').bind('drop', function(event) {
    var notecard = event.originalEvent.dataTransfer.getData("text/plain");
    event.target.appendChild(document.getElementById(notecard));
    // var c = $(document.getElementById(notecard))[0];
    // var c = $('#notecard')[0];
    //event.target.innerHTML = document.getElementById(notecard);
    //event.target.append(notecard);
    //$(event.target).append(document.getElementById(notecard));
    //$(event.target).append('#notecard');
    //$('#notecard').appendTo(event.target);
    event.preventDefault(); 
});

原因是notecard不是node

修改你的代码

$('#todo, #inprog').bind('drop', function(event) {
  var notecardText = event.originalEvent.dataTransfer.getData("text/plain");
  var notecard = document.createElement("div"); // Create a node first, div or p or span
  notecard.appendChild(notecardText) // append your text to the node
  event.target.appendChild(document.getElementById(notecard));
  event.preventDefault(); 
});

找到了解决方案,DOM对象没有为动态创建的元素加载,我在创建它们之前调用js函数,所以event.originalEvent.dataTransfer.getData("text/plai‌​n");返回null,因为js加载时没有元素存在。我调用了创建DOM的函数来解决这个问题。'<div id="itemT'+j+'" name="task'+j+'" draggable="true" contenteditable class="cardTitle" ondragstart="dragS1(event)"></div>'