javascript - 「HIERARCHY_REQUEST_ERR：DOM例外3」-エラーの正確な原因は何ですか？

Question

それはjQueryとどの程度正確に関連していますか？ライブラリが内部でネイティブJavaScript関数を使用していることは知っていますが、そのような問題が発生するたびに、ライブラリは正確に何をしようとしているのでしょうか。

score 234 · Accepted Answer

これは、DOMノードをDOMツリー内の移動できない場所に挿入しようとしたことを意味します。私がこれを見る最も一般的な場所は、以下を許可しないSafariです。

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

一般的に、これはこれが実際に意図されていた場所の単なる間違いです。

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

野生で見られる他の原因（コメントから要約）：

ノードをそれ自体に追加しようとしています
ノードにnullを追加しようとしています
テキストノードにノードを追加しようとしています。
HTMLが無効です（たとえば、ターゲットノードを閉じられない）
ブラウザは、追加しようとしているHTMLがXMLであると見なします（<!doctype html>挿入されたHTMLに追加するか、XHR経由でフェッチするときにコンテンツタイプを指定することで修正します）

score 5 · Accepted Answer

jquery ajax 呼び出し $.ajax が原因でこのエラーが発生する場合

次に、サーバーから返されるdataTypeを指定する必要がある場合があります。この単純なプロパティを使用して、応答を大幅に修正しました。

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

score 3 · Accepted Answer

特にjQueryでは、要素を作成するときにhtmlタグの周りの注意を忘れると、この問題が発生する可能性があります。

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

あなたが意味したのは

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

score 3 · Accepted Answer

このエラーは、無効なHTMLであるノードをDOMに挿入しようとしたときに発生する可能性があります。これは、次のように、誤った属性のように微妙な場合があります。

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

score 2 · Accepted Answer

@Kelly Nortonは彼の答えで正しいThe browser thinks the HTML you are attempting to append is XMLと示唆してspecifying the content type when fetching via XHRいます.

ただし、変更する予定のないサードパーティのライブラリを使用する場合があります。私の場合は JQuery UI です。次にContent-Type、JavaScript 側で応答タイプをオーバーライドするのではなく、応答で権限を提供する必要があります。に設定すれContent-Typeばtext/html問題ありません。

私の場合、file.xhtmltofile.htmlアプリケーションサーバーの名前を変更するのと同じくらい簡単でした。MIME タイプのマッピングをすぐに使用できる拡張機能がありました。コンテンツが動的な場合、何らかの方法で応答のコンテンツタイプを設定できます (例:res.setContentType("text/html")サーブレット API)。

score 1 · Accepted Answer

答えを2時間検索したので、ここにもう1つ具体的な答えを追加します...

ドキュメントにタグを挿入しようとしていました。htmlは次のようになりました：

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

お気づきの方もいらっしゃると思いますが、前の例（）ではタグが閉じてい<area/>ます。これはChromeブラウザでは受け入れられませんでした。 w3schoolsは閉鎖すべきだと考えているようで、このタグの公式仕様は見つかりませんでしたが、Chromeでは動作しません。<area/>Firefoxはまたは<area></area>またはでそれを受け入れません<area>。Chromeにはが必要<area>です。IEは何でも受け入れます。

とにかく、このエラーはHTMLが正しくないことが原因である可能性があります。

score 1 · Accepted Answer

このスレッドが古いことは知っていますが、他の人が役立つと思われる問題の別の原因に遭遇しました。GoogleAnalyticsがHTMLコメントに自分自身を追加しようとするとエラーが発生していました。問題のあるコード：

document.documentElement.firstChild.appendChild(ga);

最初の要素がHTMLコメント（つまり、Dreamweaverテンプレートコード）であったため、これがエラーの原因でした。

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

問題のあるコードを、明らかに防弾ではないものに変更しましたが、より良いものに変更しました。

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

score 1 · Accepted Answer

Internet Explorer でノードを別のウィンドウに追加しようとしているときにこの問題が発生した場合は、ノード自体ではなく、ノード内の HTML を使用してみてください。

myElement.appendChild(myNode.html());

IE は、別のウィンドウへのノードの追加をサポートしていません。

score 1 · Accepted Answer

Google Chrome 拡張機能サイドウィキを使用しているときに、このエラーが発生しました。それを無効にすると、問題は解決しました。

score 1 · Accepted Answer

このエラーは、ウィンドウ A に既に存在するウィンドウに動的に appendChild を追加しようとしたときに IE9 で発生しました。を使用してウィンドウ A のフォーム要素window.opener.document.getElementById('formElement').appendChild(input);

これはエラーをスローします。子ウィンドウを使用して入力要素を作成し、document.createElement('input');それをパラメーターとしてウィンドウ A に渡しwindow.opener、そこで追加を行う場合と同じです。追加しようとしていたのと同じウィンドウで入力要素を作成した場合にのみ、エラーなしで成功します。

したがって、私の結論（確認してください）：あるウィンドウで要素を動的に作成（を使用document.createElement）してから、別のウィンドウの要素に追加（を使用.appendChild）することはできません（XMLと見なされないようにするために見逃した特定の追加手順を実行する必要はありませんか何か）。これは IE9 では失敗し、エラーがスローされますが、FF では問題なく動作します。

PS。私はjQueryを使用しません。

score 1 · Accepted Answer

あなたはこれらの質問を見ることができます

Javascript を使用してネストされたリストを再帰的に生成するときに HIERARCHY_REQUEST_ERR を取得する

また

ASP.NET ボタンのポストバックを使用した jQuery UI ダイアログ

結論は

関数 append を使用しようとするときは、この例のように新しい変数を使用する必要があります

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

上記の例では、var "dlg" を使用して関数 appendTo を実行します。するとエラー「HIERARCHY_REQUEST_ERR」は二度と出なくなります。

score 0 · Accepted Answer

スクリプトのデバッグ（Internet Explorer）オプションを無効にした場合、IE9でこのエラーが発生します。スクリプトのデバッグを有効にしても、エラーは表示されず、ページは正常に機能します。これは、DOM例外が有効または無効のデバッグと関係があるのは奇妙に思えます。

score 0 · Accepted Answer

要素のクローンを作成するのを忘れたため、そのエラーが発生しました。

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

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

score 0 · Accepted Answer

これが発生するもう1つの理由は、要素の準備が整う前に追加していることです。

<body>

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

</body>
</html>

この場合、スクリプトをの後に移動する必要があります。それがコーシャかどうかは完全にはわかりませんが、本文の後にスクリプトを移動しても役に立たないようです:/

スクリプトを移動する代わりに、イベントハンドラーで追加することもできます。

score 0 · Accepted Answer

参考までに。

IE は、要素が追加されているウィンドウコンテキストとは異なるウィンドウコンテキストで作成された要素の追加をブロックします。

例えば

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

別のウィンドウコンテキストを使用して、jQuery で dom 要素を作成する方法がまだわかりません。

javascript - 「HIERARCHY_REQUEST_ERR：DOM例外3」-エラーの正確な原因は何ですか？

15 に答える 15

Related

Reference