Co dokładnie może spowodować błąd „HIERARCHY_REQUEST_ERR: DOM Exception 3”?


184

Jak dokładnie odnosi się do jQuery? Wiem, że biblioteka używa wewnętrznych funkcji javascript wewnętrznie, ale co dokładnie próbuje zrobić, gdy pojawia się taki problem?

Odpowiedzi:


227

Oznacza to, że próbowałeś wstawić węzeł DOM w miejsce w drzewie DOM, do którego nie może się udać. Najczęstsze miejsce, które widzę, to Safari, które nie pozwala na:

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

Zasadniczo jest to tylko błąd, w którym to rzeczywiście było zamierzone:

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

Inne przyczyny obserwowane na wolności (podsumowane z komentarzy):

  • Próbujesz dołączyć węzeł do siebie
  • Próbujesz dołączyć wartość null do węzła
  • Próbujesz dołączyć węzeł do węzła tekstowego.
  • Twój kod HTML jest nieprawidłowy (np. Nie udało się zamknąć węzła docelowego)
  • Przeglądarka uważa, że ​​kod HTML, który próbujesz dołączyć, to XML (napraw, dodając <!doctype html>do wstrzykniętego HTML lub określając typ zawartości podczas pobierania przez XHR)

49
Błąd występuje również podczas próby dołączenia węzła do siebie. Sam na to wpadłem :-)
Ben Clayton

5
Właśnie próbowałem dodać wartość zerową do elementu (i całkowicie niezwiązaną wskazówkę - zawsze upewnij się, że twoje funkcje zwracają to, co napisałeś, aby je zwrócić: P)
Veli Gebrev

Widziałem to, gdy jeden z tagów zamykających zniknął z celu.
Tom H

IE (9) może zgłosić ten błąd podczas używania jQuery do dołączania wyników AJAX. Unikaj tego, response.xmljeśli jest to możliwe. Na przykład$(e).append(response.xml || $(response));
Courtney Christensen

Dostałem to, kiedy zmieniłem z jQuery (komputer stacjonarny) na zepto na Androida. Odsunięto.
Ravindranath Akila

5

Jeśli otrzymujesz ten błąd z powodu jquery ajax, zadzwoń do $ .ajax

Następnie może być konieczne określenie, jaki typ danych wraca z serwera. Naprawiłem odpowiedź bardzo często za pomocą tej prostej właściwości.

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

1
pojedynczy kod bazowy dla web / PhoneGap, refactored do dynamicznego ładowania za pomocą szablonu odpowiedzi przez koorchik na stackoverflow.com/questions/8366733/... . działał w przeglądarce na komputerze, nie działał w przeglądarce mobilnej ani w aplikacji natywnej. to rozwiązanie załatwiło sprawę.
Kinjal Dixit

Ten sam problem tutaj, dziwnie tylko w iOS 5. Określenie dataType działało. Dzięki
homerjam

3

W szczególności z jQuery możesz napotkać ten problem, jeśli podczas tworzenia elementów zapomnisz o znakach wokół tagu HTML:

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

Zgłasza ten błąd, ponieważ miałeś na myśli

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

3

Ten błąd może wystąpić, gdy próbujesz wstawić węzeł do DOM, który jest nieprawidłowym kodem HTML, co może być czymś tak subtelnym jak niepoprawny atrybut, na przykład:

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

2

@ Kelly Norton ma rację w odpowiedzi na to pytanie The browser thinks the HTML you are attempting to append is XMLi sugeruje specifying the content type when fetching via XHR.

To prawda, ale czasami korzystasz z bibliotek stron trzecich, których nie zamierzasz modyfikować. W moim przypadku jest to interfejs użytkownika JQuery. Następnie powinieneś podać prawo Content-Typew odpowiedzi zamiast nadpisywania typu odpowiedzi po stronie JavaScript. Ustaw Content-Typena text/htmli jesteś w porządku.

W moim przypadku było tak łatwe, jak zmiana nazwy file.xhtmlna file.html- serwer aplikacji miał pewne rozszerzenie MIME typów odwzorowań po wyjęciu z pudełka. Gdy treść jest dynamiczna, możesz w jakiś sposób ustawić typ odpowiedzi (np. res.setContentType("text/html")W Servlet API).


1

Możesz zobaczyć te pytania

Uzyskiwanie HIERARCHY_REQUEST_ERR przy użyciu Javascript do rekurencyjnego generowania zagnieżdżonej listy

lub

Okno dialogowe interfejsu użytkownika jQuery z zwrotnym przyciskiem ASP.NET

Z tego wniosek

kiedy próbujesz użyć funkcji append, powinieneś użyć nowej zmiennej, jak w tym przykładzie

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

W powyższym przykładzie użyto var "dlg", aby uruchomić funkcję appendTo. Wtedy błąd „HIERARCHY_REQUEST_ERR” nie pojawi się ponownie.


1

Wystąpił ten błąd podczas korzystania z rozszerzenia Sidewiki Google Chrome. Wyłączenie go rozwiązało problem.


1

Dodam tutaj jeszcze jedną konkretną odpowiedź, ponieważ było to 2-godzinne wyszukiwanie odpowiedzi ...

Próbowałem wstrzyknąć znacznik do dokumentu. HTML był taki:

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

Jeśli zauważysz, znacznik jest zamknięty w poprzednim przykładzie ( <area/>). Nie zostało to zaakceptowane w przeglądarkach Chrome. Wygląda na to, że w3schools powinien być zamknięty i nie mogłem znaleźć oficjalnej specyfikacji tego tagu, ale na pewno nie działa w Chrome. Firefox nie zaakceptuje go za pomocą <area/>lub <area></area>lub <area>. Chrome musi mieć <area>. IE akceptuje wszystko.

W każdym razie ten błąd może być spowodowany niepoprawnym kodem HTML.


1

Wiem, że ten wątek jest stary, ale napotkałem inną przyczynę problemu, która może być dla innych pomocna. Wystąpił błąd związany z tym, że Google Analytics próbował dołączyć się do komentarza HTML. Obraźliwy kod:

document.documentElement.firstChild.appendChild(ga);

Powodowało to błąd, ponieważ moim pierwszym elementem był komentarz HTML (mianowicie kod szablonu Dreamweaver).

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

Zmodyfikowałem kod obrażający na coś, co nie jest kuloodporne, ale lepiej:

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

1

Jeśli napotkasz ten problem podczas próby dołączenia węzła do innego okna w programie Internet Explorer, spróbuj użyć kodu HTML wewnątrz węzła zamiast samego węzła.

myElement.appendChild(myNode.html());

IE nie obsługuje dołączania węzłów do innego okna.


Czy rzeczywiście tego próbowałeś? Nawet w przeglądarce Chrome pojawia się błąd TypeError: Nie można wykonać polecenia „appendChild” w „Węzle”: parametr 1 nie jest typu „Węzeł”. (…). Dzieje się tak, ponieważ .html () jest typu string, a appendChild oczekuje typu Node.
joedotnot 13.12.16

1

Ten BŁĄD zdarzył mi się w IE9, gdy próbowałem dynamicznie dołączyćDziecko do tego, które już istniało w oknie A. Okno A utworzy okno potomne B. W oknie B po akcji użytkownika uruchomiona zostanie funkcja i uruchomi appendChild na element formularza w oknie A za pomocą window.opener.document.getElementById('formElement').appendChild(input);

To spowodowałoby błąd. To samo z tworzeniem elementu wejściowego za pomocą document.createElement('input');w oknie potomnym, przekazywanie go jako parametru do window.openerokna A i tam dołączanie. Tylko jeśli utworzyłem element wejściowy w tym samym oknie, w którym zamierzałem go dodać, odniósłby sukces bez błędów.

Tak więc mój wniosek (proszę zweryfikować): żaden element nie może być dynamicznie tworzony (za pomocą document.createElement) w jednym oknie, a następnie dołączany (za pomocą .appendChild) do elementu w innym oknie (bez zrobienia określonego dodatkowego kroku, który przegapiłem, aby upewnić się, że nie jest uważany za XML lub coś). To się nie udaje w IE9 i generuje błąd, ale w FF działa to dobrze.

PS. Nie używam jQuery.


Dzięki twojemu wskaźnikowi wymyśliłem sposób na obejście tego. Proszę zobaczyć odpowiedź, którą opublikowałem, jeśli jesteś zainteresowany.
T.Ho

0

Innym powodem może być to, że dołączasz, zanim element będzie gotowy, np

<body>

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

</body>
</html>

W takim przypadku musisz przenieść skrypt po. Nie jestem do końca pewien, czy to koszerne, ale przesuwanie skryptu po ciele nie wydaje się pomocne: /

Zamiast przenosić skrypt, możesz także dołączyć go w module obsługi zdarzeń.


0

Wystąpił ten błąd, ponieważ zapomniałem sklonować mój element.

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

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

0

Tylko w celach informacyjnych.

IE zablokuje dołączanie dowolnego elementu utworzonego w innym kontekście okna niż kontekst okna, do którego element się dołącza.

na przykład

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

Nie wymyśliłem jeszcze, jak utworzyć element dom za pomocą jQuery przy użyciu innego kontekstu okna.


0

Ten błąd pojawia się w IE9, jeśli wyłączyłem opcję debugowania skryptu (Internet Explorer). Jeśli włączę debugowanie skryptu, nie widzę błędu, a strona działa poprawnie. Wydaje się to dziwne, co wyjątek DOM ma do czynienia z debugowaniem włączonym lub wyłączonym.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.