Was genau kann einen "HIERARCHY_REQUEST_ERR: DOM-Ausnahme 3" -Fehler verursachen?

184

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?

javascript jquery domexception Julian Weimer
quelle

227

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):

Sie versuchen, einen Knoten an sich selbst anzuhängen
Sie versuchen, null an einen Knoten anzuhängen
Sie versuchen, einen Knoten an einen Textknoten anzuhängen.
Ihr HTML ist ungültig (z. B. wenn Ihr Zielknoten nicht geschlossen werden kann)
Der Browser glaubt, dass der HTML-Code, den Sie anhängen möchten, XML ist (korrigieren Sie ihn, indem Sie ihn <!doctype html>zu Ihrem injizierten HTML- Code hinzufügen oder den Inhaltstyp beim Abrufen über XHR angeben).

Kelly Norton
quelle

49

Der Fehler tritt auch auf, wenn Sie versuchen, einen Knoten an sich selbst anzuhängen. Ich bin gerade selbst auf diesen gestoßen :-)

Ben Clayton

5

Ich habe gerade versucht, einem Element eine Null hinzuzufügen (und einen völlig unabhängigen Tipp - stellen Sie immer sicher, dass Ihre Funktionen das zurückgeben, was Sie geschrieben haben, um zurückzugeben: P)

Veli Gebrev

Ich habe dies gesehen, als eines der schließenden Tags im Ziel fehlte.

Tom H

IE (9) kann diesen Fehler auslösen, wenn jQuery zum Anhängen von AJAX-Ergebnissen verwendet wird. Vermeiden Sie dies, indem Sie, response.xmlsofern verfügbar, verwenden. Zum Beispiel$(e).append(response.xml || $(response));

Courtney Christensen

Ich habe das bekommen, als ich von jQuery (Desktop) zu Zepto auf Android gewechselt bin. Zurückgeschaltet.

Ravindranath Akila

5

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

Dave Robertson
quelle

1

Einzelcodebasis für Web / Phonegap, überarbeitet zum dynamischen Laden von Vorlagen mithilfe der Antwort von koorchik unter stackoverflow.com/questions/8366733/… . arbeitete im Desktop-Browser, funktionierte nicht im mobilen Browser oder in der nativen App. Diese Lösung hat es geschafft.

Kinjal Dixit

Gleiches Problem hier, seltsamerweise nur in iOS 5. Die Angabe des Datentyps hat funktioniert. Danke

Homerjam

3

Insbesondere bei jQuery kann dieses Problem auftreten, wenn Sie beim Erstellen von Elementen die Carets um das HTML-Tag vergessen:

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

Wird diesen Fehler auslösen, weil Sie gemeint haben

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

Fatmuemoo
quelle

3

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

Andrew MacLeod
quelle

2

@ Kelly Norton hat Recht in seiner Antwort The browser thinks the HTML you are attempting to append is XMLund 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-Typein der Antwort angeben, anstatt den Antworttyp auf der JavaScript-Seite zu überschreiben. Stellen Sie Ihre Content-Typeauf text/htmlund es geht Ihnen gut.

In meinem Fall war es so einfach wie das Umbenennen des file.xhtmlto- file.htmlapplication-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).

Nowaker
quelle

1

Sie können diese Fragen sehen

Abrufen von HIERARCHY_REQUEST_ERR bei Verwendung von Javascript zum rekursiven Generieren einer verschachtelten Liste

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.

rein
quelle

1

Ich habe diesen Fehler bei der Verwendung der Google Chrome-Erweiterung Sidewiki festgestellt. Durch Deaktivieren wurde das Problem für mich behoben.

Jesse Fowler
quelle

1

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.

markthegrea
quelle

1

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

S. Walker
quelle

1

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.

Dan-Nolan
quelle

Hast du das tatsächlich versucht? Sogar in Chrome erhalte ich TypeError: Fehler beim Ausführen von 'appendChild' auf 'Node': Parameter 1 ist nicht vom Typ 'Node'. (…). Das liegt daran, dass .html () vom Typ string ist und appendChild den Typ Node erwartet.

Joedotnot

1

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.createElementin einem Fenster erstellt (mithilfe ) und dann an .appendChildein 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.

Yeti
quelle

Dank Ihres Zeigers habe ich einen Weg gefunden, dies zu umgehen. Bitte lesen Sie die Antwort, die ich gepostet habe, wenn Sie interessiert sind.

T.Ho

0

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.

allyourcode
quelle

0

Ich habe diesen Fehler erhalten, weil ich vergessen habe, mein Element zu klonen.

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

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

code_monk
quelle

0

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.

T.Ho
quelle

0

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.

Annapoorni D.
quelle

Was genau kann einen "HIERARCHY_REQUEST_ERR: DOM-Ausnahme 3" -Fehler verursachen?

Antworten: