Apa sebenarnya yang dapat menyebabkan "HIERARCHY_REQUEST

184

Bagaimana tepatnya hubungannya dengan jQuery? Saya tahu pustaka menggunakan fungsi javascript asli secara internal, tetapi apa sebenarnya yang coba dilakukan setiap kali masalah seperti itu muncul?

javascript jquery domexception Julian Weimer
sumber

227

Itu berarti Anda telah mencoba untuk memasukkan simpul DOM ke suatu tempat di pohon DOM di mana ia tidak bisa pergi. Tempat paling umum yang saya lihat adalah di Safari yang tidak mengizinkan yang berikut ini:

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

Secara umum, ini hanya kesalahan di mana ini sebenarnya dimaksudkan:

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

Penyebab lain yang terlihat di alam liar (dirangkum dari komentar):

Anda mencoba menambahkan node ke dirinya sendiri
Anda mencoba menambahkan nol ke sebuah node
Anda mencoba menambahkan simpul ke simpul teks.
HTML Anda tidak valid (mis. Gagal menutup node target Anda)
Peramban berpikir HTML yang Anda coba tambahkan adalah XML (perbaiki dengan menambahkan <!doctype html>ke HTML yang Anda suntik, atau sebutkan jenis konten saat mengambil melalui XHR)

Kelly Norton
sumber

49

Kesalahan juga terjadi ketika Anda mencoba dan menambahkan node ke dirinya sendiri. Saya sendiri bertemu yang ini :-)

Ben Clayton

5

Saya baru saja mencoba menambahkan nol ke elemen (dan tip yang sama sekali tidak terkait - selalu pastikan fungsi Anda mengembalikan hal yang Anda tulis untuk dikembalikan: P)

Veli Gebrev

Saya melihat ini ketika salah satu tag penutup hilang dari target.

Tom H

IE (9) dapat melempar kesalahan ini saat menggunakan jQuery untuk menambahkan hasil AJAX. Hindari ini dengan menggunakan yang response.xmltersedia. Misalnya,$(e).append(response.xml || $(response));

Courtney Christensen

Mendapat ini ketika saya berubah dari jQuery (desktop) ke zepto di Android. Beralih kembali.

Ravindranath Akila

5

Jika Anda mendapatkan kesalahan ini karena panggilan ajax jquery $ .ajax

Maka Anda mungkin perlu menentukan apa yang dataType datang kembali dari server. Saya sudah banyak memperbaiki respons menggunakan properti sederhana ini.

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

Dave Robertson
sumber

1

basis kode tunggal untuk web / phonegap, direactored untuk memuat template secara dinamis menggunakan jawaban oleh koorchik di stackoverflow.com/questions/8366733/… . bekerja di browser desktop, tidak berfungsi di browser seluler atau aplikasi asli. solusi ini berhasil.

Kinjal Dixit

Masalah yang sama di sini, anehnya hanya di iOS 5. Menentukan tipe data bekerja. Terima kasih

homerjam

3

Khususnya dengan jQuery, Anda dapat mengalami masalah ini jika lupa tanda sisipan di sekitar tag html saat membuat elemen:

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

Akan meningkatkan kesalahan ini karena apa yang Anda maksudkan adalah

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

Fatmuemoo
sumber

3

Kesalahan ini dapat terjadi ketika Anda mencoba menyisipkan simpul ke DOM yang HTML tidak valid, yang dapat menjadi sesuatu yang halus seperti atribut yang salah, misalnya:

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

2

@Kelly Norton benar dalam jawabannya The browser thinks the HTML you are attempting to append is XMLdan menyarankan specifying the content type when fetching via XHR.

Memang benar namun Anda kadang-kadang menggunakan perpustakaan pihak ketiga yang tidak akan Anda modifikasi. Ini JQuery UI dalam kasus saya. Maka Anda harus memberikan hak Content-Typedalam respons alih-alih mengganti jenis respons di sisi JavaScript. Tetapkan Content-Typeuntuk text/htmldan Anda baik-baik saja.

Dalam kasus saya, itu semudah mengubah nama file.xhtmlke file.html- aplikasi server memiliki beberapa ekstensi untuk MIME jenis pemetaan keluar dari kotak. Saat konten dinamis, Anda dapat mengatur jenis respons konten, entah bagaimana (misalnya res.setContentType("text/html")di Servlet API).

Pembuat sekarang
sumber

1

Anda dapat melihat pertanyaan-pertanyaan ini

Memperoleh HIERARCHY_REQUEST_ERR saat menggunakan Javascript untuk menghasilkan daftar bersarang secara rekursif

atau

Dialog UI jQuery dengan postback tombol ASP.NET

Kesimpulannya adalah

ketika Anda mencoba menggunakan fungsi append, Anda harus menggunakan variabel baru, seperti contoh ini

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

Pada contoh di atas, gunakan var "dlg" untuk menjalankan fungsi appendTo. Kemudian kesalahan "HIERARCHY_REQUEST_ERR" tidak akan keluar lagi.

murni
sumber

1

Saya mengalami kesalahan ini saat menggunakan ekstensi Google Chrome Sidewiki. Menonaktifkan itu memecahkan masalah bagi saya.

Jesse Fowler
sumber

1

Saya akan menambahkan satu lagi jawaban spesifik di sini karena itu adalah pencarian 2 jam untuk jawabannya ...

Saya mencoba menyuntikkan tag ke dokumen. Html seperti ini:

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

Jika Anda perhatikan, tag ditutup pada contoh sebelumnya ( <area/>). Ini tidak diterima di browser Chrome. w3schools tampaknya berpikir itu harus ditutup, dan saya tidak dapat menemukan spek resmi pada tag ini, tetapi jelas tidak bekerja di Chrome. Firefox tidak akan menerimanya dengan <area/>atau <area></area>atau <area>. Chrome harus punya <area>. IE menerima apapun.

Lagi pula, kesalahan ini bisa jadi karena HTML Anda tidak benar.

markthegrea
sumber

1

Saya tahu utas ini sudah lama, tetapi saya telah menemukan penyebab lain masalah yang mungkin bermanfaat bagi orang lain. Saya mendapatkan kesalahan dengan Google Analytics yang mencoba menambahkan komentar HTML. Kode yang menyinggung:

document.documentElement.firstChild.appendChild(ga);

Ini menyebabkan kesalahan karena elemen pertama saya adalah komentar HTML (yaitu kode template Dreamweaver).

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

Saya memodifikasi kode yang menyinggung menjadi sesuatu yang memang tidak tahan peluru, tetapi lebih baik:

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

S.Walker
sumber

1

Jika Anda mengalami masalah ini saat mencoba menambahkan node ke jendela lain di Internet Explorer, coba gunakan HTML di dalam node alih-alih node itu sendiri.

myElement.appendChild(myNode.html());

IE tidak mendukung menambahkan node ke jendela lain.

Dan-Nolan
sumber

Apakah Anda benar-benar mencoba ini? Bahkan di Chrome saya mendapatkan TypeError: Gagal menjalankan 'appendChild' di 'Node': parameter 1 bukan tipe 'Node'. (...). Itu karena .html () adalah tipe string dan appendChild mengharapkan tipe Node.

joedotnot

1

GALAT ini terjadi pada saya di IE9 ketika saya mencoba untuk menambahkan anak secara dinamis ke yang sudah ada di jendela A. Jendela A akan membuat jendela anak B. Di jendela B setelah beberapa tindakan pengguna, suatu fungsi akan berjalan dan melakukan lampiran pada elemen bentuk di jendela A menggunakan window.opener.document.getElementById('formElement').appendChild(input);

Ini akan menimbulkan kesalahan. Sama dengan membuat elemen input menggunakan document.createElement('input');di jendela anak, meneruskannya sebagai parameter ke window.openerjendela A, dan ada menambahkan. Hanya jika saya membuat elemen input di jendela yang sama di mana saya akan menambahkannya, itu akan berhasil tanpa kesalahan.

Jadi kesimpulan saya (harap verifikasi): tidak ada elemen yang dapat dibuat secara dinamis (menggunakan document.createElement) di satu jendela, dan kemudian ditambahkan (menggunakan .appendChild) ke elemen di jendela lain (tanpa mengambil langkah ekstra tertentu yang mungkin saya lewatkan untuk memastikan itu tidak dianggap XML) atau sesuatu). Ini gagal di IE9 dan melempar kesalahan, dalam FF ini berfungsi dengan baik.

PS. Saya tidak menggunakan jQuery.

Yeti
sumber

Berkat pointer Anda, saya menemukan jalan keluarnya. Silakan lihat jawaban yang saya posting jika Anda tertarik.

T.Ho

0

Alasan lain ini dapat muncul adalah bahwa Anda menambahkan sebelum elemen siap misalnya

<body>

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

</body>
</html>

Dalam hal ini, Anda harus memindahkan skrip setelah. Tidak sepenuhnya yakin apakah itu halal, tetapi memindahkan skrip setelah tubuh sepertinya tidak membantu: /

Alih-alih memindahkan skrip, Anda juga dapat melakukan penambahan dalam pengendali acara.

semua kode Anda
sumber

0

Saya mendapat kesalahan itu karena saya lupa mengkloning elemen saya.

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

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

code_monk
sumber

0

Hanya untuk referensi.

IE akan memblokir menambahkan elemen apa pun yang dibuat dalam konteks jendela yang berbeda dari konteks jendela tempat elemen tersebut ditambahkan.

misalnya

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

Saya belum menemukan cara membuat elemen dom dengan jQuery menggunakan konteks jendela yang berbeda.

T.Ho
sumber

0

Saya mendapatkan kesalahan ini di IE9 jika saya telah menonaktifkan opsi debugging skrip (Internet Explorer). Jika saya mengaktifkan debugging skrip saya tidak melihat kesalahan dan halaman berfungsi dengan baik. Tampaknya aneh apa yang harus dilakukan pengecualian DOM dengan debugging diaktifkan atau dinonaktifkan.

Annapoorni D
sumber

Apa sebenarnya yang dapat menyebabkan "HIERARCHY_REQUEST_ERR: DOM Exception 3" -Error?

Jawaban: