Tam olarak “HIERARCHY_REQUEST_ERR: DOM İstisnası 3” hatasına neden olabilir?


184

JQuery ile tam olarak ne alakası var? Kitaplığın dahili javascript işlevlerini dahili olarak kullandığını biliyorum, ancak böyle bir sorun ortaya çıktığında tam olarak ne yapmaya çalışıyor?

Yanıtlar:


227

Bu, DOM ağacında gidemeyeceği bir yere bir DOM düğümü eklemeye çalıştığınız anlamına gelir. Bunu gördüğüm en yaygın yer, aşağıdakilere izin vermeyen Safari'de:

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

Genel olarak, bu sadece bunun amaçlandığı bir hatadır:

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

Vahşi doğada görülen diğer nedenler (yorumlardan özetlenmiştir):

  • Kendine bir düğüm eklemeye çalışıyorsunuz
  • Bir düğüme null eklemeye çalışıyorsunuz
  • Metin düğümüne bir düğüm eklemeye çalışıyorsunuz.
  • HTML'niz geçersiz (örn. Hedef düğümünüzü kapatamama)
  • Tarayıcı eklemeye çalıştığınız HTML'nin XML olduğunu düşünüyor ( <!doctype html>enjekte edilen HTML'nize ekleyerek veya XHR yoluyla getirirken içerik türünü belirleyerek düzeltme )

49
Hata, kendisine bir düğüm eklemeye çalıştığınızda da oluşur. Ben sadece bu kendimi koştu :-)
Ben Clayton

5
Ben sadece bir eleman (ve tamamen ilgisiz bir ipucu - bir null eklemek için çalışırken aldım - her zaman fonksiyonlarınızın geri dönmek için yazdığınız şeyi iade emin olun: P)
Veli Gebrev

Bunu, kapanış etiketlerinden biri hedefin dışında kaldığında gördüm.
Tom H

IE (9), AJAX sonuçlarını eklemek için jQuery kullanırken bu hatayı atabilir. Mümkün olan response.xmlyerlerde kullanarak bundan kaçının . Örneğin,$(e).append(response.xml || $(response));
Courtney Christensen

Android'de jQuery'den (masaüstü) zepto'ya geçtiğimde bunu aldım. Geri döndü.
Ravindranath Akila

5

Bir jquery ajax nedeniyle bu hatayı alıyorsanız $ .ajax'ı arayın

Daha sonra dataType'ın sunucudan ne döndüğünü belirtmeniz gerekebilir . Bu basit özelliği kullanarak yanıtı çok düzeltti.

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

1
web / phonegap için tek kod tabanı, stackoverflow.com/questions/8366733/… adresindeki koorchik tarafından yanıt kullanılarak şablonun dinamik olarak yüklenmesi için yeniden düzenlendi . masaüstü tarayıcıda çalıştı, mobil tarayıcıda veya yerel uygulamada çalışmadı. bu çözüm işe yaradı.
Kinjal Dixit

Aynı sorun burada, garip bir şekilde sadece iOS 5'te. Teşekkürler
homerjam

3

Özellikle jQuery ile öğeleri oluştururken html etiketinin etrafındaki satır işaretlerini unutursanız bu sorunla karşılaşabilirsiniz:

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

Bu hatayı ortaya çıkaracak çünkü kastettiğiniz şey

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

3

Bu hata, DOM'a geçersiz HTML olan ve yanlış bir öznitelik kadar ince bir düğüm olabilecek bir düğüm eklemeye çalıştığınızda oluşabilir:

// <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 sağ onun cevabını olduğunu The browser thinks the HTML you are attempting to append is XMLönerir ve specifying the content type when fetching via XHR.

Ancak bazen değiştirmeyeceğiniz üçüncü taraf kitaplıkları kullandığınız doğrudur. Benim durumumda JQuery UI. Ardından Content-Type, JavaScript tarafında yanıt türünü geçersiz kılmak yerine yanıtta hakkı sağlamanız gerekir . Senin Set Content-Typeiçin text/htmlve sen cezası.

Kolay yeniden adlandırma gibi Benim durumumda, öyleydi file.xhtmliçin file.htmluygulamanın sunucu kutudan çıktığı MIME türleri eşleştirmeleri için bazı uzantısı vardı -. İçerik dinamik olduğunda, yanıtın içerik türünü bir şekilde ayarlayabilirsiniz (örn res.setContentType("text/html"). Servlet API'sinde).


1

Bu soruları görebilirsiniz

Yuvalanmış bir liste yinelemeli olarak oluşturmak için Javascript kullanırken HIERARCHY_REQUEST_ERR alma

veya

ASP.NET düğmesi geri gönderme ile jQuery UI İletişim Kutusu

Sonuç şudur:

append fonksiyonunu kullanmaya çalıştığınızda, bu örnek gibi yeni bir değişken kullanmalısınız

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

Yukarıdaki örnekte appendTo işlevini çalıştırmak için var "dlg" işlevini kullanır. Sonra “HIERARCHY_REQUEST_ERR” hatası tekrar çıkmayacak.


1

Google Chrome uzantısı Sidewiki'yi kullanırken bu hatayla karşılaştım. Devre dışı bırakılması sorunu benim için çözdü.


1

Buraya bir tane daha spesifik cevap ekleyeceğim çünkü cevap için 2 saatlik bir arama yapıldı ...

Bir belgeye bir etiket enjekte etmeye çalışıyordum. Html şöyleydi:

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

Dikkat ederseniz, etiket önceki örnekte ( <area/>) kapatılmıştır . Bu, Chrome tarayıcılarda kabul edilmedi. w3schools , kapatılması gerektiğini düşünüyor ve bu etikette resmi spesifikasyonu bulamadım, ancak Chrome'da işe yaramadığı kesin. Firefox ile bunu kabul etmez <area/>ya <area></area>ya <area>. Chrome'da olması gerekir <area>. IE her şeyi kabul eder.

Her neyse, bu hata HTML'nizin doğru olmaması olabilir.


1

Bu iş parçacığının eski olduğunu biliyorum, ancak başkalarının yararlı bulabileceği sorunun başka bir nedeniyle karşılaştım. Google Analytics'in kendisini bir HTML yorumuna eklemeye çalışırken hatayla karşılaşıyordum. Sorun yaratan kod:

document.documentElement.firstChild.appendChild(ga);

İlk öğem bir HTML yorumu (yani bir Dreamweaver şablon kodu) olduğu için bu hataya neden oluyordu.

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

Suçlu kod kuşkusuz kurşun geçirmez, ama daha iyi bir şey için değiştirdim:

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

1

Internet Explorer'da başka bir pencereye bir düğüm eklemeye çalışırken bu sorunla karşılaşırsanız, düğümün kendisi yerine düğümün içindeki HTML'yi kullanmayı deneyin.

myElement.appendChild(myNode.html());

IE başka bir pencereye düğüm eklemeyi desteklemiyor.


Bunu gerçekten denedin mi? Chrome'da bile TypeError alıyorum: 'Node' üzerinde 'appendChild' çalıştırılamadı: parametre 1 'Node' tipinde değil. (…). Çünkü .html () türü string türünde ve appendChild, Node türünü beklemektedir.
joedotnot

1

Bu HATA IE9'da bir pencerede zaten var olan bir dinamik olarak eklemeyi denediğimde bana oldu. Pencere A bir alt pencere B oluşturacaktı. Bazı kullanıcı eylemlerinden sonra B penceresinde bir işlev çalışacak ve bir appendChild A penceresindeki form öğesini kullanarak window.opener.document.getElementById('formElement').appendChild(input);

Bu bir hata verir. Giriş document.createElement('input');penceresini alt pencerede kullanarak oluşturma, window.openerA penceresine parametre olarak geçirme ve eki ekleme gibi. Yalnızca girdi öğesini ekleyeceğim pencerede oluştursaydım, hatasız başarılı olur.

Sonuç olarak (lütfen doğrulayın): document.createElementbir pencerede hiçbir öğe dinamik olarak oluşturulamaz (kullanılarak ) ve daha sonra .appendChildbaşka bir penceredeki bir öğeye (kullanılarak ) eklenemez ( XML olarak değerlendirilmediğinden emin olmak için kaçırdığım belirli bir ek adım atmadan) ya da başka birşey). Bu IE9 başarısız ve hata atar, FF bu olsa iyi çalışıyor.

PS. JQuery kullanmıyorum.


İşaretçiniz sayesinde bunun bir yolunu buldum. İlgileniyorsanız, lütfen gönderdiğim yanıta bakın.
T.Ho

0

Bunun ortaya çıkmasının bir başka nedeni, eleman hazır olmadan önce eklemenizdir;

<body>

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

</body>
</html>

Bu durumda, komut dosyasını. Bunun koşer olup olmadığından tam olarak emin değilim, ancak komut dosyasını vücuttan sonra taşımak yardımcı görünmüyor: /

Komut dosyasını taşımak yerine, bir olay işleyicisinde ekleme de yapabilirsiniz.


0

Bu hatayı aldım çünkü elementimi klonlamayı unuttum.

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

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

0

Sadece referans için.

IE, farklı bir pencere bağlamında oluşturulan herhangi bir öğenin, öğenin eklendiği pencere bağlamından eklenmesini engeller.

Örneğin

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

Henüz farklı bir pencere bağlamı kullanarak jQuery ile bir dom öğesi oluşturmak için nasıl çözülmedi.


0

Komut dosyası hata ayıklama (Internet Explorer) seçeneğini devre dışı bırakmış olsaydım IE9'da bu hatayı alıyorum. Kod hata ayıklamasını etkinleştirirsem hatayı göremiyorum ve sayfa iyi çalışıyor. Bu, DOM istisnasının etkinleştirilmiş veya devre dışı bırakılmış hata ayıklama ile ne alakası var gibi görünüyor.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.