web-dev-qa-db-ja.com

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

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

javascriptjquerydomexception
183
Julian Weimer

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

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

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

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

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

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

Jquery ajax呼び出しのためにこのエラーが発生している場合は、$。ajaxを呼び出します

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

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

このエラーは、無効な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
3
Andrew MacLeod

特にjQueryを使用すると、要素を作成するときにhtmlタグの周りのキャレットを忘れると、この問題に遭遇する可能性があります。

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

あなたが意味したのは

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

@Kelly NortonはThe browser thinks the HTML you are attempting to append is XMLであり、specifying the content type when fetching via XHRを提案しているという彼の答えにぴったりです。

ただし、変更しないサードパーティのライブラリを使用することもあります。私の場合はJQuery UIです。次に、JavaScript側で応答タイプをオーバーライドする代わりに、応答に正しいContent-Typeを指定する必要があります。 Content-Typeをtext/htmlに設定すれば大丈夫です。

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

2
Nowaker

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

1
Jesse Fowler

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

myElement.appendChild(myNode.html());

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

1
Dan-Nolan

回答の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では機能しません。 Firefoxは<area/>または<area></area>または<area>を含むものを受け入れません。 Chromeには<area>が必要です。 IEは何でも受け入れます。

とにかく、このエラーはHTMLが正しくないために発生する可能性があります。

1
markthegrea

このエラーは、IE9で、ウィンドウAに既に存在するものに動的にappendChildを試みたときに発生しました。ウィンドウAは、子ウィンドウBを作成します。ウィンドウBでは、ユーザーアクションの後、関数が実行され、 window.opener.document.getElementById('formElement').appendChild(input);を使用してウィンドウAのフォーム要素

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

したがって、私の結論（確認してください）：1つのウィンドウで要素を動的に作成（document.createElementを使用）し、その後（.appendChildを使用して）別のウィンドウの要素に追加することはできませんXMLなどと見なされないようにするために逃したステップ）。これはIE9で失敗し、エラーをスローしますが、FFではこれは正常に機能します。

PS。 jQueryは使用しません。

1
Yeti

これらの質問を見ることができます

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」は再び表示されません。

1
pure

要素のクローンを忘れたため、このエラーが発生しました。

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

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

私はこのスレッドが古いことを知っていますが、他の人が役に立つと思うかもしれない問題の別の原因に遭遇しました。 Googleアナリティクスが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);
0
S.Walker

これが発生する可能性がある別の理由は、要素の準備が整う前に追加していることです。

<body>

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

</body>
</html>

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

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

0
allyourcode

参照用です。

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要素を作成する方法はまだわかりません。

0
T.Ho

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

0
SpreeTheGr8