それはjQueryとどの程度正確に関連していますか?ライブラリがネイティブのJavaScript関数を内部で使用していることを知っていますが、そのような問題が発生した場合は常に何をしようとしていますか?
それはjQueryとどの程度正確に関連していますか?ライブラリがネイティブのJavaScript関数を内部で使用していることを知っていますが、そのような問題が発生した場合は常に何をしようとしていますか?
回答:
これは、DOMノードをDOMツリーの移動できない場所に挿入しようとしたことを意味します。私がこれを目にする最も一般的な場所は、以下を許可しないSafariです。
document.appendChild(document.createElement('div'));
一般的に、これはこれが実際に意図された誤りです。
document.body.appendChild(document.createElement('div'));
野生で見られるその他の原因(コメントから要約):
<!doctype html>
注入されたHTMLに追加するか、XHR経由でフェッチするときにコンテンツタイプを指定することで修正します)response.xml
可能な場合はこれを使用してください。例:$(e).append(response.xml || $(response));
jquery ajaxが原因でこのエラーが発生した場合は、$。ajaxを呼び出します
次に、サーバーから返されるdataTypeを指定する必要がある場合があります。この単純なプロパティを使用して、応答を大幅に修正しました。
$.ajax({
url: "URL_HERE",
dataType: "html",
success: function(response) {
$('#ELEMENT').html(response);
}
});
このエラーは、無効な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
@ケリーノートンは彼の答えで正しい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.xhtml
toの名前を変更するのと同じくらい簡単でしたfile.html
-アプリケーションサーバーには、MIMEタイプマッピングの拡張機能があらかじめ用意されています。コンテンツが動的な場合、なんらかの方法で応答のコンテンツタイプを設定できます(例:res.setContentType("text/html")
サーブレットAPI)。
あなたはこれらの質問を見ることができます
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」というエラーは出なくなります。
Google Chrome拡張機能のサイドウィキを使用しているときにこのエラーが発生しました。これを無効にすると、問題が解決しました。
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が正しくないことが原因である可能性があります。
私はこのスレッドが古いことを知っていますが、他の人が役立つと思う問題の別の原因に遭遇しました。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);
Internet Explorerの別のウィンドウにノードを追加しようとしたときにこの問題が発生した場合は、ノード自体ではなくノード内のHTMLを使用してみてください。
myElement.appendChild(myNode.html());
IEは、別のウィンドウへのノードの追加をサポートしていません。
このエラーは、IE9で、ウィンドウAに既に存在するに動的にappendChildを追加しようとしたときに発生しました。ウィンドウAは子ウィンドウBを作成します。ウィンドウBでユーザーアクションを実行すると、関数が実行され、appendChildが実行されます。ウィンドウAのフォーム要素を使用して window.opener.document.getElementById('formElement').appendChild(input);
これはエラーをスローします。document.createElement('input');
子ウィンドウでを使用して入力要素を作成し、window.opener
ウィンドウAにパラメーターとして渡して、追加を行うのと同じです。追加するのと同じウィンドウでinput要素を作成した場合のみ、エラーなしで成功します。
したがって、私の結論(確認してください):document.createElement
1つのウィンドウで(を使用して)動的に要素を作成して.appendChild
から、別のウィンドウの要素に(を使用して)要素を追加することはできません(XMLと見なされないようにするために失敗した特定の追加手順を実行しないでください)か何か)。これはIE9では失敗し、エラーをスローしますが、FFではこれは正常に機能します。
PS。私はjQueryを使用しません。
これが発生する可能性があるもう1つの理由は、要素の準備が完了する前に追加していることです。
<body>
<script>
document.body.appendChild(foo);
</script>
</body>
</html>
この場合、スクリプトをの後に移動する必要があります。それがコーシャかどうかは完全にはわかりませんが、本文の後にスクリプトを移動しても効果がないようです:/
スクリプトを移動する代わりに、イベントハンドラーで追加することもできます。
参考までに。
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要素を作成する方法を理解していません。