¿Qué puede causar exactamente un error de "SOLICITUD DE JERARQUÍA ERR: Excepción DOM 3"?

Si está recibiendo este error debido a una llamada jquery ajax $.ajax

Entonces es posible que tenga que especificar lo que el Tipo de datos está regresando del servidor. He arreglado mucho la respuesta usando esta sencilla propiedad.

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

Este error puede ocurrir cuando intenta insertar un nodo en el DOM que es HTML no válido, que puede ser algo tan sutil como un atributo incorrecto, por ejemplo:

// <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

Específicamente con jQuery puede encontrarse con este problema si olvida los comillas alrededor de la etiqueta html al crear elementos:

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

Planteará este error porque lo que querías decir era

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

@Kelly Norton tiene razón en su respuesta que The browser thinks the HTML you are attempting to append is XML y sugiere specifying the content type when fetching via XHR.

Es cierto, sin embargo, a veces usa bibliotecas de terceros que no va a modificar. Es jQuery UI en mi caso. Entonces debe proporcionar el Content-Type correcto en la respuesta en lugar de sobrescribir el tipo de respuesta en el lado JavaScript. Pon tu Content-Type a text/html y estarás bien.

En mi caso, fue tan fácil como cambiar el nombre de file.xhtml a file.html - el servidor de aplicaciones tenía alguna extensión para las asignaciones de tipos MIME fuera de la caja. Cuando el contenido es dinámico, puede establecer el tipo de respuesta de contenido de alguna manera (por ejemplo, res.setContentType("text/html") en Servlet API).

Puedes ver estas preguntas

Obtener HIERARCHY_REQUEST_ERR cuando se usa Javascript para generar recursivamente una lista anidada

O

JQuery Interfaz de usuario de diálogo con ASP.NET botón postback

La conclusión es

Cuando intente usar function append, debe usar nueva variable, como este ejemplo

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

En el ejemplo anterior, usa el var "dlg" para ejecutar la función appendTo. Entonces el error "HIERARCHY_REQUEST_ERR" no saldrá nuevo.

Encontré este error al usar la extensión de Google Chrome Sidewiki. Desactivarlo resolvió el problema para mí.

Voy a agregar una respuesta específica más aquí porque fue una búsqueda de 2 horas para la respuesta...

Estaba tratando de inyectar una etiqueta en un documento. El html era así:

<map id='imageMap' name='imageMap'>
  <area shape='circle' coords='55,28,5' href='#' title='1687.01 - 0 percentile' />
</map>

Si observa, la etiqueta se cierra en el ejemplo anterior (<area/>). Esto no fue aceptado en los navegadores Chrome. w3schools parece pensar que debería estar cerrado, y no pude encontrar la especificación oficial de esta etiqueta, pero seguro que no funciona en Chrome. Firefox no lo aceptará con <area/> o <area></area> o <area>. Chrome debe tener <area>. IE acepta cualquier cosa.

De todos modos, este error puede deberse a que su HTML no es correcto.

Si se encuentra con este problema al intentar anexar un nodo a otra ventana en Internet Explorer, intente usar el HTML dentro del nodo en lugar del nodo en sí.

myElement.appendChild(myNode.html());

IE no admite la adición de nodos a otra ventana.

Este ERROR me sucedió en IE9 cuando traté de appendChild an dinámicamente a a que ya existía en una ventana A. La ventana A crearía una ventana hija B. En la ventana B después de alguna acción del usuario una función se ejecutaría y haría un appendChild en el elemento de formulario en la ventana A usando window.opener.document.getElementById('formElement').appendChild(input);

Esto lanzaría un error. Lo mismo con la creación del elemento de entrada usando document.createElement('input'); en la ventana hija, pasándolo como un parámetro a la ventana window.opener A, y allí hacer el anexar. Solo si he creado la entrada elemento en la misma ventana donde iba a añadirlo, tendría éxito sin errores.

Por lo tanto mi conclusión (por favor verifique): ningún elemento puede ser creado dinámicamente (usando document.createElement) en una ventana, y luego anexado (usando .appendChild) a un elemento en otra ventana (sin tomar tal vez un paso adicional en particular me perdí para asegurar que no se considera XML o algo así). Esto falla en IE9 y lanza el error, en FF esto funciona bien sin embargo.

PS. No uso jQuery.

Sé que este hilo es viejo, pero he encontrado otra causa del problema que otros podrían encontrar útil. Estaba recibiendo el error con Google Analytics tratando de anexarse a un comentario HTML. El código ofensivo:

document.documentElement.firstChild.appendChild(ga);

Esto estaba causando el error porque mi primer elemento era un comentario HTML (es decir, un código de plantilla de Dreamweaver).

<!-- #BeginTemplate "/Templates/default.dwt.php" -->

Modifiqué el código ofensivo a algo ciertamente no a prueba de balas, pero mejor:

document.documentElement.firstChild.nodeType===1 ? document.documentElement.firstChild.appendChild(ga) : document.documentElement.lastChild.appendChild(ga);

Otra razón por la que esto puede surgir es que se agrega antes de que el elemento esté listo, por ejemplo,

<body>

<script>
document.body.appendChild(foo);
</script>

</body>
</html>

En este caso, tendrá que mover el script después de la . No estoy completamente seguro de si eso es kosher, pero mover el script después del cuerpo no parece ayudar: /

En lugar de mover el script, también puede hacer la adición en un controlador de eventos.

Recibí ese error porque olvidé clonar mi elemento.

// creates an error
clone = $("#thing");
clone.appendTo("#somediv");

// does not
clone = $("#thing").clone();
clone.appendTo("#somediv");

Solo para referencia.

IE bloqueará la adición de cualquier elemento creado en un contexto de ventana diferente del contexto de ventana al que se está anexando el elemento.

E. g

var childWindow = window.open('somepage.html');

//will throw the exception in IE
childWindow.document.body.appendChild(document.createElement('div'));

//will not throw exception in IE
childWindow.document.body.appendChild(childWindow.document.createElement('div'));

Todavía no he descubierto cómo crear un elemento dom con jQuery usando un contexto de ventana diferente.

Obtengo este error en IE9 si había desactivado la opción de depuración de scripts (Internet Explorer). Si habilito la depuración de scripts no veo el error y la página funciona bien. Esto parece extraño qué tiene que ver la excepción DOM con la depuración habilitada o deshabilitada.