「HIERARCHY_REQUEST_ERR:DOM Exception 3」エラーを正確に引き起こす原因は何ですか?


184

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

回答:


227

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

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

一般的に、これはこれが実際に意図された誤りです。

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

野生で見られるその他の原因(コメントから要約):

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

49
このエラーは、ノードをノードに追加しようとしたときにも発生します。私はこれに自分で遭遇しました:-)
Ben Clayton

5
私はこれに要素にnullを追加しようとしています(そして完全に無関係なヒント-関数が返すように
記述し

これは、終了タグの1つがターゲットから欠落しているときに見られました。
トムH

IE(9)は、jQueryを使用してAJAX結果を追加するときにこのエラーをスローする場合があります。response.xml可能な場合はこれを使用してください。例:$(e).append(response.xml || $(response));
コートニークリステンセン

AndroidでjQuery(デスクトップ)からzeptoに変更したときにこれがわかりました。元に戻しました。
Ravindranath Akila 2013

5

jquery ajaxが原因でこのエラーが発生した場合は、$。ajaxを呼び出します

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

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

1
stackoverflow.com/questions/8366733/…で koorchikによる回答を使用して動的にロードするテンプレートにリファクタリングされた、web / phonegapの単一コードベース。デスクトップブラウザーでは機能しましたが、モバイルブラウザーやネイティブアプリでは機能しませんでした。この解決策でうまくいった。
Kinjal Dixit 2012

ここで同じ問題、奇妙なことにiOS 5でのみ。dataTypeの指定が機能しました。ありがとう
homerjam

3

特にjQueryでは、要素の作成時にhtmlタグの周りのキャレットを忘れると、この問題が発生する可能性があります。

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

あなたが何を意味していたので、このエラーが発生します

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

3

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

2

@ケリーノートンは彼の答えで正しい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-Typetext/html、あなたは大丈夫です。

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


1

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

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

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


1

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/>or <area></area>またはでそれを受け入れません<area>。Chromeにはが必要<area>です。IEは何でも受け入れます。

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


1

私はこのスレッドが古いことを知っていますが、他の人が役立つと思う問題の別の原因に遭遇しました。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);

1

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

myElement.appendChild(myNode.html());

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


実際に試してみましたか?ChromeでもTypeError:「ノード」で「appendChild」を実行できませんでした:パラメータ1のタイプが「ノード」ではありません。(…)これは、.html()が文字列型で、appendChildがノード型を期待しているためです。
joedotnot 16

1

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

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

したがって、私の結論(確認してください):document.createElement1つのウィンドウで(を使用して)動的に要素を作成して.appendChildから、別のウィンドウの要素に(を使用して)要素を追加することはできません(XMLと見なされないようにするために失敗した特定の追加手順を実行しないでください)か何か)。これはIE9では失敗し、エラーをスローしますが、FFではこれは正常に機能します。

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


あなたのポインターのおかげで、私はこれを回避する方法を見つけました。興味がありましたら、私が投稿した回答をご覧ください。
T.Ho

0

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

<body>

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

</body>
</html>

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

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


0

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

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

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

0

参考までに。

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

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.