什么会导致“HIERARCHY_REQUEST_ERR:DOMexception3” – 错误?

它到底如何与jQuery相关? 我知道这个库在内部使用原生的javascript函数,但是当出现这样的问题时,它到底在做什么呢?

这意味着你已经试图将DOM节点插入到DOM树中不能去的地方。 我看到这最常见的地方是在Safari不允许以下内容:

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

一般来说,这实际上只是一个错误:

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

在野外看到的其他原因(从评论总结):

  • 您正试图将节点追加到自身
  • 您正试图将null追加到节点
  • 您正试图将节点追加到文本节点。
  • 您的HTML无效(例如,未能closures您的目标节点)
  • 浏览器认为你试图添加的HTML是XML(通过向注入的HTML添加<!doctype html>或者通过XHR提取时指定内容types)

如果你得到这个错误,由于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 

特别是对于jQuery,如果在创build元素时忘记了html标签的插入符号,可能会遇到此问题:

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

会提出这个错误,因为你的意思是

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

@Kelly Norton在他的回答中是正确的The browser thinks the HTML you are attempting to append is XML并build议specifying the content type when fetching via XHR

这是真的,但是你有时使用第三方库,你不会修改。 这是我的情况下的JQuery UI。 那么你应该在响应中提供正确的Content-Type ,而不是覆盖JavaScript端的响应types。 设置你的Content-Typetext/html ,你很好。

在我的情况下,就像将file.xhtml重命名为file.xhtml一样简单 – 应用程序服务器对MIMEtypes映射进行了一些扩展。 当内容是dynamic的时,你可以设置响应的内容types(例如Servlet API中的res.setContentType("text/html") )。

你可以看到这些问题

使用Javascriptrecursion生成嵌套列表时获取HIERARCHY_REQUEST_ERR

要么

与ASP.NETbutton回发jQuery UI对话框

结论是

当你尝试使用函数追加,你应该使用新的variables,就像这个例子

 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小时的search答案…

我正在试图将一个标签注入到文档中。 HTML是这样的:

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

如果您注意到,标签在前面的示例( <area/> )中被closures。 这在Chrome浏览器中不被接受。 w3schools似乎认为它应该是封闭的,我不能find这个标签的官方规范,但它肯定不能在Chrome中工作。 Firefox不接受<area/><area></area><area> 。 Chrome必须有<area> 。 IE接受任何东西。

无论如何,这个错误可能是因为你的HTML不正确。

如果在尝试将节点追加到Internet Explorer中的另一个窗口时遇到此问题,请尝试在节点内使用HTML而不是节点本身。

 myElement.appendChild(myNode.html()); 

IE不支持将节点附加到另一个窗口。

这个错误发生在IE9中,当我尝试将一个dynamic追加到一个已经存在于窗口A中的窗口时。窗口A将创build一个子窗口B.在窗口B中,在某个用户动作之后,一个函数将运行,并且执行一个appendChild窗体A中的窗体元素使用window.opener.document.getElementById('formElement').appendChild(input);

这会抛出一个错误。 与使用document.createElement('input');创buildinput元素相同document.createElement('input'); 在子窗口中,将其作为parameter passing给window.opener窗口A,然后执行append。 只有当我在我要添加它的同一窗口中创buildinput元素时,它才会成功而没有错误。

因此,我的结论(请确认):没有元素可以dynamic创build(使用document.createElement )在一个窗口中,然后附加(使用.appendChild )到另一个窗口中的元素(没有采取一个额外的步骤,我错过了,以确保它不被视为XML或东西)。 这在IE9中失败并抛出错误,但在FF这工作正常。

PS。 我不使用jQuery。

我知道这个线程是旧的,但我遇到了另一个问题的原因,其他人可能会发现有帮助。 Google Analytics(分析)试图将自己添加到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); 

另一个可能出现的原因是你在元素准备好之前追加例如

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

在这种情况下,你需要在脚本之后移动脚本。 不完全确定,如果这是犹太教,但移动脚本后身体似乎没有帮助:/

您也可以在事件处理程序中执行附加操作,而不是移动脚本。

我得到了这个错误,因为我忘了克隆我的元素。

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

仅供参考。

IE将阻止在元素正在追加的窗口上下文中添加在不同的窗口上下文中创build的元素。

例如

 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使用不同的窗口上下文来创build一个dom元素。

如果我禁用了脚本debugging(Internet Explorer)选项,则在IE9中出现此错误。 如果我启用脚本debugging,我看不到错误和页面正常工作。 这似乎很奇怪什么是DOMexception与debugging启用或禁用。