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?
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?
Réponses:
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):
<!doctype html>à votre HTML injecté ou en spécifiant le type de contenu lors de la récupération via XHR)response.xmlcas échéant. Par exemple,$(e).append(response.xml || $(response));
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);
}
});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"));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@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).
Vous pouvez voir ces questions
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.
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.
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.
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);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.
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.
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.
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.
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é.