¿Qué puede causar exactamente un error "HIERARCHY_REQUEST

184

¿Cómo se relaciona exactamente con jQuery? Sé que la biblioteca usa funciones nativas de JavaScript internamente, pero ¿qué es exactamente lo que intenta hacer cada vez que aparece un problema?

javascript jquery domexception Julian Weimer
fuente

227

Significa que ha intentado insertar un nodo DOM en un lugar del árbol DOM donde no puede ir. El lugar más común en el que veo esto es en Safari, que no permite lo siguiente:

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

En general, esto es solo un error donde realmente se pretendía:

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

Otras causas observadas en la naturaleza (resumidas de los comentarios):

Está intentando agregar un nodo a sí mismo
Está intentando agregar nulo a un nodo
Está intentando agregar un nodo a un nodo de texto.
Su HTML no es válido (por ejemplo, no puede cerrar su nodo de destino)
El navegador cree que el HTML que está intentando agregar es XML (corríjalo agregando <!doctype html>a su HTML inyectado o especificando el tipo de contenido al buscar a través de XHR)

Kelly Norton
fuente

49

El error también se produce cuando intenta agregar un nodo a sí mismo. Acabo de encontrarme con este :-)

Ben Clayton

55

Acabo de obtener esto tratando de agregar un valor nulo a un elemento (y una sugerencia totalmente no relacionada: siempre asegúrese de que sus funciones devuelvan lo que escribió para devolver: P)

Veli Gebrev

Vi esto cuando una de las etiquetas de cierre faltaba en el objetivo.

Tom H

IE (9) puede arrojar este error al usar jQuery para agregar resultados AJAX. Evite esto usando response.xmldonde esté disponible. Por ejemplo,$(e).append(response.xml || $(response));

Courtney Christensen

Obtuve esto cuando cambié de jQuery (escritorio) a zepto en Android. Conmutado de nuevo.

Ravindranath Akila

5

Si recibe este error debido a un jquery ajax, llame a $ .ajax

Entonces es posible que tenga que especificar cuál es el tipo de datos va a volver desde el servidor. He arreglado mucho la respuesta usando esta propiedad simple.

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

Dave Robertson
fuente

1

base de código único para web / phonegap, refactorizado para cargar dinámicamente la plantilla usando la respuesta de koorchik en stackoverflow.com/questions/8366733/… . funcionó en el navegador de escritorio, no funcionó en el navegador móvil o en la aplicación nativa. Esta solución hizo el truco.

Kinjal Dixit

El mismo problema aquí, extrañamente solo en iOS 5. Especificar dataType funcionó. Gracias

homerjam

3

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

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

Levantará este error porque lo que quisiste decir fue

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

Fatmuemoo
fuente

3

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

Andrew MacLeod
fuente

2

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

Sin embargo, es cierto que a veces utiliza bibliotecas de terceros que no va a modificar. Es JQuery UI en mi caso. Luego, debe proporcionar el derecho Content-Typeen la respuesta en lugar de anular el tipo de respuesta en el lado de JavaScript. Establecer su Content-Typea text/htmly que están bien.

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

Nowaker
fuente

1

Puedes ver estas preguntas

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

o

Cuadro de diálogo jQuery UI con devolución de botones ASP.NET

La conclusión es

cuando intente usar la función append, debe usar una 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 la var "dlg" para ejecutar la función appendTo. Entonces el error "HIERARCHY_REQUEST_ERR" no volverá a aparecer.

puro
fuente

1

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

Jesse Fowler
fuente

1

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 en 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.

markthegrea
fuente

1

Sé que este hilo es antiguo, pero he encontrado otra causa del problema que otros pueden encontrar útil. Recibía el error con Google Analytics tratando de agregarse a un comentario HTML. El código ofensivo:

document.documentElement.firstChild.appendChild(ga);

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

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

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

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

S.Walker
fuente

1

Si se encuentra con este problema al intentar agregar 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 agregar nodos a otra ventana.

Dan-Nolan
fuente

¿Realmente intentaste esto? Incluso en Chrome obtengo TypeError: no se pudo ejecutar 'appendChild' en 'Nodo': el parámetro 1 no es del tipo 'Nodo'. (...). Eso es porque .html () es de tipo string y appendChild espera el tipo Node.

joedotnot

1

Este ERROR me ocurrió en IE9 cuando traté de agregar un niño dinámicamente a uno que ya existía en una ventana A. La ventana A crearía una ventana secundaria 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 arrojaría un error. Lo mismo ocurre con la creación del elemento de entrada utilizando document.createElement('input');en la ventana secundaria, pasándolo como un parámetro a la window.openerventana A, y allí se agrega. Solo si creara el elemento de entrada en la misma ventana donde iba a agregarlo, tendría éxito sin errores.

Por lo tanto, mi conclusión (verifique): ningún elemento puede crearse dinámicamente (usando document.createElement) en una ventana, y luego agregarse (usar .appendChild) a un elemento en otra ventana (sin dar quizás un paso adicional en particular que me perdí para asegurar que no se considere XML o algo). Esto falla en IE9 y arroja el error, aunque en FF esto funciona bien.

PD. No uso jQuery.

Yeti
fuente

Gracias a su puntero, descubrí una forma de evitar esto. Por favor, vea la respuesta que publiqué si está interesado interesado.

T.Ho

0

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

<body>

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

</body>
</html>

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

En lugar de mover la secuencia de comandos, también puede agregarlos en un controlador de eventos.

allyourcode
fuente

0

Recibí ese error porque olvidé clonar mi elemento.

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

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

code_monk
fuente

0

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á agregando el elemento.

p.ej

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.

Aunque
fuente

0

Me sale este error en IE9 si hubiera deshabilitado la opción de depuración de script (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?

Annapoorni D
fuente

¿Qué puede causar exactamente un error "HIERARCHY_REQUEST_ERR: DOM Exception 3"?

Respuestas: