I'm using DOMParser to parse a string with and html tag to append it on another dom node

  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);
  }

The content of dragged variable is :

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

I'm using DOMParser to parse a string with and html tag to append it on another dom node

  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);
  }

The content of dragged variable is :

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

• javascript
• html
• dom
• appendchild
• domparser

Share Improve this question Follow edited Nov 10, 2017 at 9:01 cнŝdk 32.2k77 gold badges6060 silver badges8080 bronze badges asked Nov 10, 2017 at 8:13 af_imi4af_imi4 9111 silver badge77 bronze badges 4

• Any errors in the console? You can also append HTML as string without a DOMParser with .insertAdjacentHTML() – Andreas Commented Nov 10, 2017 at 8:16
• the console error is TypeError: Argument 1 of Node.appendChild is not an object – af_imi4 Commented Nov 10, 2017 at 8:18
• Try var dragged = parser.parseFromString(e.dataTransfer.getData("Text") , "text/html").body.firstElementChild. – dfsq Commented Nov 10, 2017 at 8:31
• @af_imi4 I just gave you the explanation in my answer, did you checked it? – cнŝdk Commented Nov 10, 2017 at 10:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Actually when you use DOMParser's parseFromString() method with the option text/html it will return a HTMLDocument and not a DOM element. So you can't directly append the result to an element, that's why you got TypeError: Argument 1 of Node.appendChild is not an object.

You need to get the content of this HTMLDocument before appending it to your Element, this is how you should implement it:

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);

Demo:

This is a working Example:

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);