189 votes

Qu'est-ce qui peut exactement causer une erreur "HIERARCHY_REQUEST_ERR: DOM Exception 3"?

Comment cela est-il lié à jQuery exactement ? Je sais que la bibliothèque utilise des fonctions JavaScript natives en interne, mais que cherche-t-elle exactement à faire chaque fois qu'un tel problème se présente ?

234voto

Kelly Norton Points 2336

Cela signifie que vous avez essayé d'insérer un nœud DOM à un endroit dans l'arborescence DOM où il ne peut pas aller. Le lieu le plus courant où je vois cela est sur Safari, qui n'autorise pas ce qui suit :

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

Généralement, il s'agit simplement d'une erreur où cela était en fait prévu :

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

D'autres causes observées dans la nature (résumé des commentaires) :

  • Vous essayez d'ajouter un nœud à lui-même
  • Vous essayez d'ajouter null à un nœud
  • Vous essayez d'ajouter un nœud à un nœud texte.
  • Votre HTML n'est pas valide (par exemple, vous oubliez de fermer votre nœud cible)
  • Le navigateur pense que le HTML que vous essayez d'ajouter est du XML (corrigez en ajoutant à votre HTML injecté, ou en spécifiant le type de contenu lors de la récupération via XHR)

49 votes

L'erreur se produit également lorsque vous essayez d'ajouter un nœud à lui-même. Je suis tombé sur cela récemment :-)

5 votes

Je viens juste d'obtenir ceci en essayant d'ajouter un null à un élément (et un conseil totalement non lié - assurez-vous toujours que vos fonctions retournent la chose pour laquelle vous les avez écrites :P)

0 votes

J'ai vu cela lorsque l'une des balises de fermeture manquait de la cible.

5voto

Dave Robertson Points 175

Si vous obtenez cette erreur en raison d'un appel ajax jquery $.ajax

Alors vous devrez peut-être spécifier ce que le dataType renvoie le serveur. J'ai beaucoup corrigé la réponse en utilisant cette simple propriété.

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

1 votes

Code unique pour le web/phonegap, refactorisé pour charger dynamiquement le modèle à l'aide de la réponse de koorchik sur stackoverflow.com/questions/8366733/…. fonctionnait dans le navigateur de bureau, ne fonctionnait pas dans le navigateur mobile ou l'application native. cette solution a fait l'affaire.

0 votes

Même problème ici, bizarrement uniquement sous iOS 5. Spécifier le type de données a fonctionné. Merci

3voto

Fatmuemoo Points 1297

Plus précisément avec jQuery, vous pouvez rencontrer ce problème si vous oubliez les guillemets autour de la balise html lors de la création d'éléments :

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

va provoquer cette erreur car ce que vous vouliez dire était

 $("#target").append($("

3voto

Andrew MacLeod Points 73

Cette erreur peut survenir lorsque vous essayez d'insérer un nœud dans le DOM qui n'est pas un HTML valide, ce qui peut être aussi subtil qu'un attribut incorrect, par exemple :

//  peut avoir un attribut 'type'
var $input = $('').attr('type', 'text');
$holder.append($input); // OK

//

2voto

Nowaker Points 2449

@Kelly Norton a raison dans sa réponse que Le navigateur pense que l'HTML que vous essayez d'ajouter est du XML et suggère de spécifier le type de contenu lors de la récupération via XHR.

Cependant, il est parfois nécessaire d'utiliser des bibliothèques tierces que vous ne modifierez pas. C'est le cas de JQuery UI dans mon cas. Dans ce cas, vous devez fournir le bon Content-Type dans la réponse au lieu de remplacer le type de réponse côté JavaScript. Définissez votre Content-Type sur text/html et tout ira bien.

Dans mon cas, il a suffi de renommer le fichier.xhtml en fichier.html - le serveur d'application avait des correspondances d'extensions avec les types MIME préconfigurées. Lorsque le contenu est dynamique, vous pouvez définir le type de contenu de la réponse d'une manière ou d'une autre (par exemple, res.setContentType("text/html") dans l'API de Servlet).

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X