Qu'est-ce qui peut exactement provoquer une erreur "HIERARCHY_REQUEST

184

Comment cela se rapporte-t-il exactement à jQuery? Je sais que la bibliothèque utilise des fonctions javascript natives en interne, mais que tente-t-elle de faire exactement chaque fois qu'un tel problème apparaît?

javascript jquery domexception Julian Weimer
la source

227

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

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

En général, il ne s'agit que d'une erreur là où cela était réellement prévu:

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

Autres causes observées à l'état sauvage (résumées à partir 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 de texte.
Votre HTML n'est pas valide (par exemple, échec de la fermeture de votre nœud cible)
Le navigateur pense que le HTML que vous essayez d'ajouter est du XML (corrigez en ajoutant <!doctype html>à votre HTML injecté ou en spécifiant le type de contenu lors de la récupération via XHR)

Kelly Norton
la source

49

L'erreur se produit également lorsque vous essayez d'ajouter un nœud à lui-même. Je viens de rencontrer celui-ci moi-même :-)

Ben Clayton

5

Je viens de recevoir ceci en essayant d'ajouter un null à un élément (et une astuce totalement indépendante - assurez-vous toujours que vos fonctions renvoient la chose que vous leur avez écrite pour renvoyer: P)

Veli Gebrev

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

Tom H

IE (9) peut générer cette erreur lors de l'utilisation de jQuery pour ajouter des résultats AJAX. Évitez cela en utilisant le response.xmlcas échéant. Par exemple,$(e).append(response.xml || $(response));

Courtney Christensen

J'ai obtenu ceci quand je suis passé de jQuery (bureau) à zepto sur Android. Retourné.

Ravindranath Akila

5

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

Ensuite, vous devrez peut-être spécifier le type de données qui revient du serveur. J'ai beaucoup corrigé la réponse en utilisant cette propriété simple.

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

Dave Robertson
la source

1

base de code unique pour web / phonegap, remaniée pour charger dynamiquement un modèle à l'aide de answer by koorchik sur stackoverflow.com/questions/8366733/… . fonctionnait dans un navigateur de bureau, ne fonctionnait pas dans un navigateur mobile ou une application native. cette solution a fait l'affaire.

Kinjal Dixit

Même problème ici, bizarrement uniquement dans iOS 5. Spécifier dataType a fonctionné. Merci

homerjam

3

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

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

Lèvera cette erreur car ce que vous vouliez dire était

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

Fatmuemoo
la source

3

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

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

2

@Kelly Norton a raison dans sa réponse The browser thinks the HTML you are attempting to append is XMLet suggère specifying the content type when fetching via XHR.

C'est vrai cependant vous utilisez parfois des bibliothèques tierces que vous n'allez pas modifier. C'est JQuery UI dans mon cas. Ensuite, vous devez fournir le droit Content-Typedans la réponse au lieu de remplacer le type de réponse du côté JavaScript. Réglez votre Content-Typesur text/htmlet tout va bien.

Dans mon cas, il était aussi facile que de renommer l' file.xhtmlà file.html- serveur d' applications avait une extension à des types MIME applications de la boîte. 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 Servlet).

Nowaker
la source

1

Vous pouvez voir ces questions

Obtenir HIERARCHY_REQUEST_ERR lors de l'utilisation de Javascript pour générer récursivement une liste imbriquée

ou

Boîte de dialogue jQuery UI avec publication du bouton ASP.NET

La conclusion est

lorsque vous essayez d'utiliser la fonction append, vous devez utiliser une nouvelle variable, comme cet exemple

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

Dans l'exemple ci-dessus, utilise la variable "dlg" pour exécuter la fonction appendTo. Ensuite, l'erreur "HIERARCHY_REQUEST_ERR" ne sera plus diffusée.

pur
la source

1

J'ai rencontré cette erreur lors de l'utilisation de l'extension Google Chrome Sidewiki. La désactivation a résolu le problème pour moi.

Jesse Fowler
la source

1

Je vais ajouter une réponse plus spécifique ici car il s'agissait d'une recherche de 2 heures pour la réponse ...

J'essayais d'injecter une balise dans un document. Le html était comme ceci:

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

Si vous remarquez, la balise est fermée dans l'exemple précédent ( <area/>). Cela n'a pas été accepté dans les navigateurs Chrome. w3schools semble penser qu'il devrait être fermé, et je n'ai pas pu trouver les spécifications officielles sur cette balise, mais cela ne fonctionne certainement pas dans Chrome. Firefox ne l'acceptera pas avec <area/>ou <area></area>ou <area>. Chrome doit avoir <area>. IE accepte tout.

Quoi qu'il en soit, cette erreur peut être due au fait que votre code HTML n'est pas correct.

markthegrea
la source

1

Je sais que ce fil est ancien, mais j'ai rencontré une autre cause du problème que d'autres pourraient trouver utile. J'obtenais l'erreur avec Google Analytics en essayant de s'ajouter à un commentaire HTML. Le code incriminé:

document.documentElement.firstChild.appendChild(ga);

Cela provoquait l'erreur car mon premier élément était un commentaire HTML (à savoir un code de modèle Dreamweaver).

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

J'ai modifié le code incriminé en quelque chose qui n'est certes pas à l'épreuve des balles, mais en mieux:

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

S.Walker
la source

1

Si vous rencontrez ce problème en essayant d'ajouter un nœud dans une autre fenêtre dans Internet Explorer, essayez d'utiliser le code HTML à l'intérieur du nœud au lieu du nœud lui-même.

myElement.appendChild(myNode.html());

IE ne prend pas en charge l'ajout de nœuds à une autre fenêtre.

Dan-Nolan
la source

Avez-vous réellement essayé cela? Même dans Chrome, j'obtiens TypeError: Impossible d'exécuter 'appendChild' sur 'Node': le paramètre 1 n'est pas de type 'Node'. (…). C'est parce que .html () est de type string et appendChild attend le type Node.

joedotnot

1

Cette ERREUR m'est arrivée dans IE9 lorsque j'ai essayé d'ajouter dynamiquement un enfant à un qui existait déjà dans une fenêtre A. La fenêtre A créerait une fenêtre enfant B.Dans la fenêtre B après une action de l'utilisateur, une fonction s'exécutait et ferait un appendChild sur le élément de formulaire dans la fenêtre A en utilisant window.opener.document.getElementById('formElement').appendChild(input);

Cela jetterait une erreur. Idem avec la création de l'élément d'entrée en utilisant document.createElement('input');dans la fenêtre enfant, en le passant comme paramètre à lawindow.opener fenêtre A, et là, faites l'ajout. Ce n'est que si je créais l'élément d'entrée dans la même fenêtre où j'allais l'ajouter, cela réussirait sans erreurs.

Ainsi ma conclusion (veuillez vérifier): aucun élément ne peut être créé dynamiquement (en utilisant document.createElement) dans une fenêtre, puis ajouté (en utilisant .appendChild) à un élément dans une autre fenêtre (sans prendre peut-être une étape supplémentaire que j'ai manquée pour m'assurer qu'il n'est pas considéré comme XML ou quelque chose). Cela échoue dans IE9 et génère l'erreur, dans FF cela fonctionne bien cependant.

PS. Je n'utilise pas jQuery.

Yéti
la source

Grâce à votre pointeur, j'ai trouvé un moyen de contourner ce problème. S'il vous plaît voir la réponse que j'ai publiée si vous êtes intéressé.

T.Ho

0

Une autre raison pour laquelle cela peut survenir est que vous ajoutez avant que l'élément ne soit prêt, par exemple

<body>

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

</body>
</html>

Dans ce cas, vous devrez déplacer le script après le. Je ne sais pas si c'est casher, mais déplacer le script après le corps ne semble pas aider: /

Au lieu de déplacer le script, vous pouvez également effectuer l'ajout dans un gestionnaire d'événements.

allyourcode
la source

0

J'ai eu cette erreur parce que j'ai oublié de cloner mon élément.

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

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

code_monk
la source

0

Juste pour référence.

IE bloquera l'ajout de tout élément créé dans un contexte de fenêtre différent du contexte de fenêtre auquel l'élément est ajouté.

par exemple

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'));

Je n'ai pas encore compris comment créer un élément dom avec jQuery en utilisant un contexte de fenêtre différent.

T.Ho
la source

0

J'obtiens cette erreur dans IE9 si j'avais désactivé l'option de débogage de script (Internet Explorer). Si j'active le débogage de script, je ne vois pas l'erreur et la page fonctionne correctement. Cela semble étrange ce que l'exception DOM a à voir avec le débogage activé ou désactivé.

Annapoorni D
la source

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

Réponses: