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>

最佳答案

实际上，当您将DOMParser的parseFromString() method与text/html选项一起使用时，它将返回HTMLDocument而不是DOM元素。因此，您不能将结果直接附加到元素上，这就是得到TypeError: Argument 1 of Node.appendChild is not an object的原因。

您需要先获取此HTMLDocument的内容，然后再将其添加到Element中，这是实现它的方式：

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 dragged = parser.parseFromString( "<div><p>foo</p><p>bar</p></div>" , "text/html");

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

关于javascript - 无法将解析的字符串附加到dom，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47218300/