Cannot append DOM element to DIV node: Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node'

Question

Using the DOM parser I parsed a string , and then tried to append the object to a container, like so:

      var newCategory = 
        \"


        
      

Answer 1

You can't append document nodes (the result of parseFromString). Instead take the child of the document object and append it:

var parser = new DOMParser();
var newNode = parser.parseFromString(newCategory, "text/xml");
stack.appendChild(newNode.documentElement);

Note, that your HTML is not XML-complient so you might get errors parsing it. In this case make sure you fix them (like duplicated alt attribute,   entities).

However, in your case I doubt you need to parse XML at all. You can just append entire HTML string in the first place. For example like this:

var stack = document.getElementById('newCategories');
stack.insertAdjacentHTML('beforeend', newCategory);