Javascript 无法将解析的字符串追加到dom

我正在使用DOMParser解析一个带有html标记的字符串，并将其附加到另一个dom节点上

  window.addEventListener("load",carga);
  var origen = document.getElementById('origen');
  var destino = document.getElementById('destino');

  function carga(e){
    origen.addEventListener('dragstart',function(e){
        e.dataTransfer.setData("Text",origen.outerHTML);
    },false);

    destino.addEventListener('dragover',function(e){
        e.preventDefault();
    });


    destino.addEventListener('drop',function(e){
        e.preventDefault();
        console.log( e.dataTransfer.getData("Text"));
        var parser = new DOMParser();
        dragged = parser.parseFromString( e.dataTransfer.getData("Text") , "text/html");
        console.log(dragged);
        destino.appendChild(dragged);
    },false);
  }

拖动变量的内容为：

<section draggable="true" id="origen" style="height: 50px; width: 50px; border-color: green; border-style: solid;">origen</section>

origen

实际上，当您将与选项

text/html

一起使用时，它将返回一个而不是DOM元素。因此，您不能直接将结果附加到元素，这就是为什么会出现

TypeError:Node.appendChild的参数1不是对象的原因

在将此
HTMLDocument
附加到元素之前，您需要获取其内容，以下是您应该如何实现它：

var parser = new DOMParser();
var dragged = parser.parseFromString( "<div><p>foo</p><p>bar</p></div>" , "text/html");

var divDoc = dragged.getRootNode();
destino.appendChild(divDoc.body);

var parser=new DOMParser（）；
var drad=parser.parseFromString（“foo
bar
”，“text/html”）；
var divDoc=drauged.getRootNode（）；
destino.appendChild（divDoc.body）；

演示：

这是一个工作示例：


var parser=new DOMParser（）；
var drad=parser.parseFromString（“foo
bar
”，“text/html”）；
var divDoc=drauged.getRootNode（）；
document.body.appendChild（divDoc.body）控制台中有错误吗？您也可以在不使用
DOMParser
的情况下将HTML作为字符串附加到控制台，错误是
TypeError:Node.appendChild的参数1不是对象
Try
var draud=parser.parseFromString（e.dataTransfer.getData（“Text”），“Text/HTML”）.body.firstElementChild
@af\u imi4我刚才在回答中给了您解释，你检查过了吗？或者更容易：
destino.insertAdjacentHTML（“beforeend”，“foo
bar
”）
@Andreas是的，这是另一个选项，我只是试图指出
DOMParser
问题，这里：）只是好奇：这里真的需要
getRootNode（）
吗？在我看来，
document.body.appendChild（draugd.body）
将起作用。@agrm是的，在这种情况下，调用
draugd.body
就足够了，但在某些情况下，它可能会抛出错误，这就是为什么我们应该确保从解析的
字符串中获取根节点的原因。感谢您的澄清！可能对某些人来说很明显，但我也注意到这将附加新解析的divDoc文档的完整
元素。在某些情况下，可能需要追加拖动的.body.firstChild。