What Exactly Can Cause an "Hierarchy_Request_Err: Dom Exception 3"-Error

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)

DOM Exception: HIERARCHY_REQUEST_ERR (3) error

I know its a long time since the Q was asked but I reached it based on the error message.
specifically in my case I was getting the following error: "HIERARCHY_REQUEST_ERR: DOM Exception 3: A Node was inserted somewhere it doesn't belong.".

I was trying to append a node that I was creating using jquery to some other node in my html document.
It turned out that by mistake I used $('div') instead of $('<div>') for the creating the new (appended) node.

I hope this will help someone in the future.

Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

If your response is HTML, try specifying the dataType in the $.get() like so:

$.get(url, function(html) {
    $("#wrap").html(html);
}, 'html');

I just had exactly the same problem attaching the response from a jQuery $.post(). The response is HTML but jQuery could not (for whatever reason) correctly determine the data type.

Need help avoid HIERARCHY_REQUEST_ERR: DOM Exception 3 error

You are likely to have to call adoptNode first:

this.treeDoc.adoptNode(newElements);

Then append to a child node like:

this.treeDoc.documentElement.firstChild.appendChild(newElements);

Additionally if newElements is an array of new elements(like the name suggest) you will need to iterate through it.

See https://developer.mozilla.org/en/DOM/document for more info.

An answer to your comment(it was to large to be a comment it self):

Even if I didn't reproduce the error I think I know why you are getting it. Error 8 is the code for NOT_FOUND_ERR. Guess you save the value of childNodes.length and iterate from 0(zero) to this value, what happens here is that the childNodes array is updated every time a child is added or removed, and then in some point in your loop i is actually greater than childNodes.length(but not greater that the saved value) causing childNodes[i] to return undefined. And because undefined is not a child of the referenced node the NOT_FOUND_ERR (code 8) is throw. To avoid this with minor changes to the code just iterates for the initial value of childNodes.length-1 to 0(zero), or just do:

while(node.childNodes.length > 0) node.removeChild(node.childNodes[0])

What causes an hierarchy request error when trying to move an svg from one div to another?

You're mixing jQuery code with standard DOM API.

The function appendChild() expects a DOM node, not an Element ID. Try

var svg = document.getElementById(svgId+"V");
document.getElementById("LightBoxDiv").appendChild(svg);

jqueryUI Sortable: Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

Sortable should only be initialized once on container of items, you don't need do do anything when you add new items. Also items option should be string (selector) not an array of elements. Here is a simplified working version of your code:

$('.column').sortable({
    items: '> li',
    connectWith: '.column',
    handle: '.widget-head',
    placeholder: 'widget-placeholder',
    forcePlaceholderSize: true,
    revert: 300,
    delay: 100,
    opacity: 0.8,
    containment: 'document',
    start: function(e, ui) {
        $(ui.helper).addClass('dragging');
    },
    stop: function(e, ui) {
        $(ui.item).css({
            width: ''
        }).removeClass('dragging');
    }
});

$('#addAWidget').on('click', function(event) {
    var newWidget = '<li class="widget color-white"><div class="widget-head"><h3>Newly added widget</h3></div><div class="widget-content"><p>Yet another lorem ipsum !</p></div></li>';
    $(newWidget).appendTo('#column' + $('#columnNumber').val());
});

fiddle

What Exactly Can Cause an "Hierarchy_Request_Err: Dom Exception 3"-Error