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

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)

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

Tags:

Javascript

Jquery

Domexception

Recent Posts