What exactly can cause an “HIERARCHY_REQUEST_ERR: DOM Exception 3”-Error?

What exactly can cause an “HIERARCHY_REQUEST_ERR: DOM Exception 3”-Error?

How exactly does it relate to jQuery? I know the library uses native javascript functions internally, but what exactly is it trying to do whenever such a problem appears?

Solutions/Answers:

Solution 1:

It means you’ve tried to insert a DOM node into a place in the DOM tree where it cannot go. The most common place I see this is on Safari which doesn’t allow the following:

document.appendChild(document.createElement('div'));

Generally, this is just a mistake where this was actually intended:

document.body.appendChild(document.createElement('div'));

Other causes seen in the wild (summarized from comments):

  • You are attempting to append a node to itself
  • You are attempting to append null to a node
  • You are attempting to append a node to a text node.
  • Your HTML is invalid (e.g. failing to close your target node)
  • The browser thinks the HTML you are attempting to append is XML (fix by adding <!doctype html> to your injected HTML, or specifying the content type when fetching via XHR)
Related:  Best way to store a key=>value array in JavaScript?

Solution 2:

If you are getting this error due to a jquery ajax call $.ajax

Then you may need to specify what the dataType is coming back from the server. I have fixed the response a lot using this simple property.

$.ajax({
    url: "URL_HERE",
    dataType: "html",
    success: function(response) {
        $('#ELEMENT').html(response);
    }
});

Solution 3:

Specifically with jQuery you can run into this issue if forget the carets around the html tag when creating elements:

 $("#target").append($("div").text("Test"));

Will raise this error because what you meant was

 $("#target").append($("<div>").text("Test"));

Solution 4:

This error can occur when you try to insert a node into the DOM which is invalid HTML, which can be something as subtle as an incorrect attribute, for example:

// <input> can have a 'type' attribute
var $input = $('<input/>').attr('type', 'text');
$holder.append($input);  // OK

// <div> CANNOT have a 'type' attribute
var $div = $('<div></div>').attr('type', 'text');
$holder.append($div);   // Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

Solution 5:

@Kelly Norton is right in his answer that The browser thinks the HTML you are attempting to append is XML and suggests specifying the content type when fetching via XHR.

It’s true however you sometimes use third party libraries that you are not going to modify. It’s JQuery UI in my case. Then you should provide the right Content-Type in the response instead of overriding the response type on JavaScript side. Set your Content-Type to text/html and you are fine.

Related:  Bootstrap's tooltip moves table cells to right a bit on hover

In my case, it was as easy as renaming the file.xhtml to file.html – application server had some extension to MIME types mappings out of the box. When content is dynamic, you can set the content type of response somehow (e.g. res.setContentType("text/html") in Servlet API).

Solution 6:

You can see these questions

Getting HIERARCHY_REQUEST_ERR when using Javascript to recursively generate a nested list

or

jQuery UI Dialog with ASP.NET button postback

The conclusion is

when you try to use function append, you should use new variable, like this example

jQuery(function() {
   var dlg = jQuery("#dialog").dialog({ 
                        draggable: true, 
                        resizable: true, 
                        show: 'Transfer', 
                        hide: 'Transfer', 
                        width: 320, 
                        autoOpen: false, 
                        minHeight: 10, 
                        minwidth: 10 
          });
  dlg.parent().appendTo(jQuery("form:first"));
});

In the example above, uses the var “dlg” to run the function appendTo.
Then error “HIERARCHY_REQUEST_ERR” will not come out again.