web-dev-qa-db-fra.com

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

Quel est le lien avec jQuery? Je sais que la bibliothèque utilise des fonctions JavaScript natives en interne, mais que tente-t-elle exactement de faire à chaque fois qu'un tel problème apparaît?

javascriptjquerydomexception
183
Julian Weimer

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

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

En règle générale, il s’agit simplement d’une erreur, alors que c’était ce qui était prévu:

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

Autres causes observées à l'état sauvage (résumés à partir de 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 code HTML n'est pas valide (par exemple, vous ne fermez pas votre noeud cible)
  • Le navigateur pense que le code HTML que vous essayez d’ajouter est XML (corrigez-le en ajoutant <!doctype html> à votre HTML injecté, ou en spécifiant le type de contenu lors de la récupération via XHR)
224
Kelly Norton

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

Ensuite, vous devrez peut-être spécifier ce que dataType 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);
    }
});
5
Dave Robertson

Cette erreur peut se produire lorsque vous essayez d'insérer un nœud dans le DOM qui est un code HTML non valide. Il peut s'agir d'un attribut 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
3
Andrew MacLeod

En particulier 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"));

Soulèvera cette erreur parce que ce que vous vouliez dire était

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

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

Il est vrai que vous utilisez parfois des bibliothèques tierces que vous n'allez pas modifier. C'est l'interface utilisateur de JQuery dans mon cas. Ensuite, vous devez fournir le droit Content-Type Dans la réponse au lieu de remplacer le type de réponse du côté JavaScript. Réglez votre Content-Type Sur text/html Et tout va bien.

Dans mon cas, il était aussi simple que de renommer file.xhtml En file.html - le serveur d'applications avait une extension aux mappages de types MIME prêts à l'emploi. Lorsque le contenu est dynamique, vous pouvez définir le type de contenu de la réponse (par exemple, res.setContentType("text/html") dans l'API Servlet).

2
Nowaker

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

1
Jesse Fowler

Si vous rencontrez ce problème lors de la tentative d'ajout d'un nœud dans une autre fenêtre d'Internet Explorer, essayez d'utiliser le code HTML contenu dans le nœud au lieu du nœud lui-même.

myElement.appendChild(myNode.html());

Internet Explorer ne prend pas en charge l’ajout de nœuds à une autre fenêtre.

1
Dan-Nolan

Je vais ajouter une réponse plus précise ici parce que la recherche a duré deux heures ...

J'essayais d'injecter une étiquette dans un document. Le code HTML était comme ça:

<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 Chrome. w3schools semble penser qu'il devrait être fermé, et je n'ai pas pu trouver la spécification officielle sur cette balise, mais elle ne le fait pas. ne fonctionne pas dans Chrome. Firefox ne l’acceptera pas avec <area/> ou <area></area> ou <area>. Chrome doit avoir <area>. IE n'accepte rien.

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

1
markthegrea

Cette erreur s’est produite dans IE9 lorsque j’ai essayé d’ajouterChild de manière dynamique à une fenêtre 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écuterait et ferait élément de formulaire dans la fenêtre A utilisant window.opener.document.getElementById('formElement').appendChild(input);

Cela jetterait une erreur. Pareil pour créer l’élément d’entrée en utilisant document.createElement('input'); dans la fenêtre enfant, en le passant comme paramètre à la window.opener fenêtre A, et là faire l'appendice. Ce n'est que si j'ai créé l'élément d'entrée dans la même fenêtre que celle que je voulais ajouter qu'il réussira sans erreur.

Donc ma conclusion (veuillez vérifier): aucun élément ne peut être créé dynamiquement (avec document.createElement) dans une fenêtre, puis ajouté (avec .appendChild) à un élément dans une autre fenêtre (sans prendre éventuellement une étape supplémentaire que j'ai manquée pour m'assurer que ce n'est pas considéré comme XML ou quelque chose du genre). Cela échoue dans IE9 et renvoie l'erreur, mais dans FF, cela fonctionne bien.

PS Je n'utilise pas jQuery.

1
Yeti

Vous pouvez voir ces questions

Obtention de HIERARCHY_REQUEST_ERR lors de l'utilisation de Javascript pour générer de manière récursive une liste imbriquée

ou

Boîte de dialogue de l'interface utilisateur jQuery avec publication sur bouton ASP.NET

La conclusion est

lorsque vous essayez d'utiliser la fonction append, vous devez utiliser une nouvelle variable, comme dans 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 affichée.

1
pure

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");
0
code_monk

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 qui essayait de s'ajouter à un commentaire HTML. Le code incriminé:

document.documentElement.firstChild.appendChild(ga);

Cela était à l'origine de 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 un texte certes non blindable, mais meilleur:

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

Une autre raison pour laquelle cela peut se produire est que vous ajoutez avant que l'élément 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. Pas tout à fait sûr que ce soit 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.

0
allyourcode

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 la fenêtre à laquelle 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.

0
T.Ho

Je reçois 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, l'erreur ne s'affiche pas et la page fonctionne correctement. Cela semble étrange ce que l'exception DOM a à voir avec le débogage activé ou désactivé.

0
SpreeTheGr8