Wie genau hängt es mit jQuery zusammen? Ich weiß, dass die Bibliothek intern native Javascript-Funktionen verwendet, aber was genau versucht sie zu tun, wenn ein solches Problem auftritt?
Wie genau hängt es mit jQuery zusammen? Ich weiß, dass die Bibliothek intern native Javascript-Funktionen verwendet, aber was genau versucht sie zu tun, wenn ein solches Problem auftritt?
Antworten:
Dies bedeutet, dass Sie versucht haben, einen DOM-Knoten an einer Stelle im DOM-Baum einzufügen, an die er nicht gehen kann. Der häufigste Ort, an dem ich dies sehe, ist Safari, bei dem Folgendes nicht zulässig ist:
document.appendChild(document.createElement('div'));
Im Allgemeinen ist dies nur ein Fehler, bei dem dies tatsächlich beabsichtigt war:
document.body.appendChild(document.createElement('div'));
Andere in freier Wildbahn beobachtete Ursachen (zusammengefasst aus Kommentaren):
<!doctype html>
zu Ihrem injizierten HTML- Code hinzufügen oder den Inhaltstyp beim Abrufen über XHR angeben).response.xml
sofern verfügbar, verwenden. Zum Beispiel$(e).append(response.xml || $(response));
Wenn Sie diesen Fehler aufgrund einer JQuery Ajax erhalten, rufen Sie $ .ajax auf
Dann müssen Sie möglicherweise angeben, welcher Datentyp vom Server zurückkommt. Ich habe die Antwort viel mit dieser einfachen Eigenschaft behoben.
$.ajax({
url: "URL_HERE",
dataType: "html",
success: function(response) {
$('#ELEMENT').html(response);
}
});
Dieser Fehler kann auftreten, wenn Sie versuchen, einen Knoten in das DOM einzufügen, bei dem es sich um ungültiges HTML handelt. Dies kann so subtil sein wie ein falsches Attribut. Beispiel:
// <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 hat Recht in seiner Antwort The browser thinks the HTML you are attempting to append is XML
und schlägt vor specifying the content type when fetching via XHR
.
Es ist wahr, aber Sie verwenden manchmal Bibliotheken von Drittanbietern, die Sie nicht ändern werden. In meinem Fall ist es die JQuery-Benutzeroberfläche. Dann sollten Sie das Recht Content-Type
in der Antwort angeben, anstatt den Antworttyp auf der JavaScript-Seite zu überschreiben. Stellen Sie Ihre Content-Type
auf text/html
und es geht Ihnen gut.
In meinem Fall war es so einfach wie das Umbenennen des file.xhtml
to- file.html
application-Servers mit einer sofortigen Erweiterung der MIME-Typzuordnungen. Wenn der Inhalt dynamisch ist, können Sie den Inhaltstyp der Antwort irgendwie festlegen (z. B. res.setContentType("text/html")
in der Servlet-API).
Sie können diese Fragen sehen
oder
jQuery UI Dialog mit ASP.NET Button Postback
Die Schlussfolgerung ist
Wenn Sie versuchen, die Funktion append zu verwenden, sollten Sie wie in diesem Beispiel eine neue Variable verwenden
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"));
});
Verwendet im obigen Beispiel die Variable "dlg", um die Funktion appendTo auszuführen. Dann wird der Fehler "HIERARCHY_REQUEST_ERR" nicht wieder ausgegeben.
Ich habe diesen Fehler bei der Verwendung der Google Chrome-Erweiterung Sidewiki festgestellt. Durch Deaktivieren wurde das Problem für mich behoben.
Ich werde hier eine weitere spezifische Antwort hinzufügen, da es eine 2-stündige Suche nach der Antwort war ...
Ich habe versucht, ein Tag in ein Dokument einzufügen. Das HTML war wie folgt:
<map id='imageMap' name='imageMap'>
<area shape='circle' coords='55,28,5' href='#' title='1687.01 - 0 percentile' />
</map>
Wenn Sie bemerken, wird das Tag im vorhergehenden Beispiel ( <area/>
) geschlossen. Dies wurde in Chrome-Browsern nicht akzeptiert. w3schools scheint zu denken, dass es geschlossen werden sollte, und ich konnte die offizielle Spezifikation für dieses Tag nicht finden, aber es funktioniert sicher nicht in Chrome. Firefox akzeptiert es nicht mit <area/>
oder <area></area>
oder <area>
. Chrome muss haben <area>
. IE akzeptiert alles.
Dieser Fehler kann jedenfalls daran liegen, dass Ihr HTML-Code nicht korrekt ist.
Ich weiß, dass dieser Thread alt ist, aber ich habe eine andere Ursache für das Problem gefunden, die andere möglicherweise hilfreich finden. Ich habe den Fehler erhalten, dass Google Analytics versucht hat, sich an einen HTML-Kommentar anzuhängen. Der beleidigende Code:
document.documentElement.firstChild.appendChild(ga);
Dies verursachte den Fehler, da mein erstes Element ein HTML-Kommentar war (nämlich ein Dreamweaver-Vorlagencode).
<!-- #BeginTemplate "/Templates/default.dwt.php" -->
Ich habe den beleidigenden Code in etwas geändert, das zwar nicht kugelsicher ist, aber besser:
document.documentElement.firstChild.nodeType===1 ? document.documentElement.firstChild.appendChild(ga) : document.documentElement.lastChild.appendChild(ga);
Wenn Sie beim Versuch, einen Knoten an ein anderes Fenster in Internet Explorer anzuhängen, auf dieses Problem stoßen, versuchen Sie, den HTML-Code innerhalb des Knotens anstelle des Knotens selbst zu verwenden.
myElement.appendChild(myNode.html());
IE unterstützt das Anhängen von Knoten an ein anderes Fenster nicht.
Dieser FEHLER ist mir in IE9 passiert, als ich versucht habe, ein dynamisches an ein bereits in Fenster A vorhandenes anzuhängen. Fenster A hat ein untergeordnetes Fenster B erstellt. In Fenster B wurde nach einer Benutzeraktion eine Funktion ausgeführt und ein appendChild für das Fenster ausgeführt Formularelement in Fenster A mit window.opener.document.getElementById('formElement').appendChild(input);
Dies würde einen Fehler auslösen. Gleiches gilt für das Erstellen des Eingabeelements document.createElement('input');
im untergeordneten Fenster, wobei es als Parameter an das übergeben wirdwindow.opener
Fenster A und das Anhängen. Nur wenn ich das Eingabeelement in demselben Fenster erstellen würde, in dem ich es anhängen wollte, wäre es ohne Fehler erfolgreich.
Daher meine Schlussfolgerung (bitte überprüfen): Kein Element kann dynamisch document.createElement
in einem Fenster erstellt (mithilfe ) und dann an .appendChild
ein Element in einem anderen Fenster angehängt (Verwendung ) werden (ohne möglicherweise einen bestimmten zusätzlichen Schritt zu unternehmen, den ich verpasst habe, um sicherzustellen, dass es nicht als XML betrachtet wird oder so). Dies schlägt in IE9 fehl und löst den Fehler aus. In FF funktioniert dies jedoch einwandfrei.
PS. Ich benutze jQuery nicht.
Ein weiterer Grund dafür kann sein, dass Sie anhängen, bevor das Element fertig ist, z
<body>
<script>
document.body.appendChild(foo);
</script>
</body>
</html>
In diesem Fall müssen Sie das Skript nach dem verschieben. Ich bin mir nicht ganz sicher, ob das koscher ist, aber das Verschieben des Skripts nach dem Text scheint nicht zu helfen: /
Anstatt das Skript zu verschieben, können Sie das Anhängen auch in einem Ereignishandler durchführen.
Nur als Referenz.
Der IE blockiert das Anhängen von Elementen, die in einem anderen Fensterkontext als dem Fensterkontext erstellt wurden, an den das Element angehängt wird.
z.B
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'));
Ich habe noch nicht herausgefunden, wie ein dom-Element mit jQuery unter Verwendung eines anderen Fensterkontexts erstellt wird.
Ich erhalte diesen Fehler in IE9, wenn ich die Option zum Debuggen von Skripten (Internet Explorer) deaktiviert habe. Wenn ich das Debuggen von Skripten aktiviere, wird der Fehler nicht angezeigt und die Seite funktioniert einwandfrei. Dies scheint seltsam, was die DOM-Ausnahme mit dem aktivierten oder deaktivierten Debugging zu tun hat.