Co dokładnie może spowodować błąd „HIERARCHY_REQUEST

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?

javascript jquery domexception Julian Weimer
źródło

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)

Kelly Norton
źródło

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

Dave Robertson
źródło

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

Fatmuemoo
źródło

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

Andrew MacLeod
źródło

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

Nowaker
źródło

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.

czysty
źródło

1

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

Jesse Fowler
źródło

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.

markthegrea
źródło

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

S.Walker
źródło

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.

Dan-Nolan
źródło

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.

Yeti
źródło

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ń.

cały kod
źródło

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

code_monk
źródło

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.

Chociaż
źródło

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.

Annapoorni D.
źródło

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

Odpowiedzi: