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