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

user1658296

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

      var newCategory = 
        "<div class=\"column-expenses-left\" id=\"newCategory"+ expenseCategoryCssName +"\">" +
          "<hr />" +
          "<div style=\"text-align: center;\">" +
            "<?php echo $budgetExpense[\'ExpenseCategory\'][\'cssName\']; ?>&nbsp;" +
            "<span>" +
            "<a href=\"#\" class=\"delete-category\"><img alt=\"\" src=\"/theme/all/img/Trash_can_small.png\" style=\"width: 15px; height: 15px; float: right;\" id=\"\" alt=\"Delete\"/></a>"+
            "</span>" +
          "</div>" +
          "<hr />" +
          "<p class=\"pointer\" style=\"text-align: center;\"><img alt=\"\" src=\"/theme/all/img/add_to_yours.png\" style=\"display: inline-block;\" /></p>" +
        "</div> <!-- column-expenses-left -->";

      // get the object to append to 
      var stack = document.getElementById('newCategories');

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

      stack.appendChild(newNode);

However I get the following error:

 Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type '#document' may not be inserted inside nodes of type 'DIV'.

I don't quite understand what is happening here? Is there a way to use the parser so that it creates a node of type DIV instead? Is this even a good idea?

dfsq

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, &nbsp; 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);

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent

From Dev

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

From Dev

failed to execute appendchild on node

From Dev

jQuery Chosen: Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node':

From Dev

Failed to execute 'appendChild' on 'Node': The new child element is null

From Dev

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' error on append tr to a table

From Dev

Getting an error: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

From Dev

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. in Chrome

From Dev

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'

From Dev

Leaflet.markercluster onclick error - Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

From Dev

Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

From Dev

Javascript error: Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

From Dev

Uncaught HierarchyRequestError

From Dev

Error: Failed to execute 'insertBefore' on 'Node'

From Dev

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

From Dev

DataTables error 'Failed to execute appendChild()'

From Dev

Does element.appendChild(node) applies properties of parent node to child node?

From Dev

XPath Error in Mink: Failed to execute 'evaluate' on 'Document': The result is not a node set, and therefore cannot be converted to the desired type

From Dev

OpenShift: "Failed to execute control start" on node application

From Dev

Uncaught DOMException: Failed to execute 'addRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule

From Dev

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

From Dev

typeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node Polymer

From Dev

Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

From Dev

How to append child in the div parent node?

From Dev

Append a div with an array in Node.js

From Dev

Uncaught TypeError: Cannot read property 'appendChild' of null

From Dev

Argument 1 of Node.appendChild is not an object when trying to append basic html

From Dev

Argument 1 of Node.appendChild is not an object when trying to append basic html

From Dev

Getting DOM node from React child element

Related Related

  1. 1

    Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent

  2. 2

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

  3. 3

    failed to execute appendchild on node

  4. 4

    jQuery Chosen: Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node':

  5. 5

    Failed to execute 'appendChild' on 'Node': The new child element is null

  6. 6

    Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' error on append tr to a table

  7. 7

    Getting an error: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

  8. 8

    Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. in Chrome

  9. 9

    Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'

  10. 10

    Leaflet.markercluster onclick error - Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

  11. 11

    Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

  12. 12

    Javascript error: Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

  13. 13

    Uncaught HierarchyRequestError

  14. 14

    Error: Failed to execute 'insertBefore' on 'Node'

  15. 15

    NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

  16. 16

    DataTables error 'Failed to execute appendChild()'

  17. 17

    Does element.appendChild(node) applies properties of parent node to child node?

  18. 18

    XPath Error in Mink: Failed to execute 'evaluate' on 'Document': The result is not a node set, and therefore cannot be converted to the desired type

  19. 19

    OpenShift: "Failed to execute control start" on node application

  20. 20

    Uncaught DOMException: Failed to execute 'addRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule

  21. 21

    Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

  22. 22

    typeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node Polymer

  23. 23

    Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

  24. 24

    How to append child in the div parent node?

  25. 25

    Append a div with an array in Node.js

  26. 26

    Uncaught TypeError: Cannot read property 'appendChild' of null

  27. 27

    Argument 1 of Node.appendChild is not an object when trying to append basic html

  28. 28

    Argument 1 of Node.appendChild is not an object when trying to append basic html

  29. 29

    Getting DOM node from React child element

HotTag

Archive