究竟什么会导致“ HIERARCHY _ REQUEST _ ERR: DOM 异常3”-错误？

它与 jQuery 到底有什么关系？我知道这个库在内部使用了本地的 javascript 函数，但是当这样的问题出现时，它到底想做什么呢？

79787 次浏览
小开
最佳答案

这意味着您已经尝试将一个 DOM 节点插入到 DOM 树中无法访问的位置。我看到的最常见的地方是 Safari，它不允许以下内容:

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

一般来说，这只是一个错误，实际上是有意这样做的:

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

其他野外原因(摘自评论) :

  • 您正在尝试将节点附加到自身
  • 您正在尝试向节点追加 null
  • 您正在尝试将节点附加到文本节点。
  • HTML 无效(例如，未能关闭目标节点)
  • 浏览器认为您试图附加的 HTML 是 XML (通过在注入的 HTML 中添加 <!doctype html>或在通过 XHR 获取时指定内容类型来修复)
小开

你可以看到这些问题

使用 Javascript 递归生成嵌套列表时获取 HIERARCHY _ REQUEST _ ERR

或者

使用 ASP.NET 按钮回发的 jQueryUI 对话框

结论是

当您尝试使用函数 append 时，应该使用 new 变量，如下例所示

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”运行函数阑尾。 然后错误“ HIERARCHY _ REQUEST _ ERR”将不会再次出现。

小开

我在使用谷歌浏览器扩展 Sidewiki 时遇到了这个错误。禁用它为我解决了这个问题。

小开

我要在这里添加一个更具体的答案，因为这是一个2小时的搜索答案..。

我试图在文档中注入一个标签，html 是这样的:

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

如果您注意到，标记在前面的示例(<area/>)中是关闭的。这在 Chrome 浏览器中是不被接受的。W3学校似乎认为它应该关闭，我找不到这个标签的官方规格，但它肯定不能在 Chrome 中工作。Firefox 不接受带有 <area/>、 <area></area>或 <area>的版本。铬必须有 <area>。IE 接受任何东西。

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

小开

特别是在使用 jQuery 时，如果在创建元素时忘记了 html 标签周围的插入符号，就会遇到这个问题:

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

将引发此错误，因为您的意思是

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

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

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


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

当您试图将一个节点插入到 DOM 中时，这个错误可能会发生，这个节点是无效的 HTML，可能是一个不正确的属性，例如:

// <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 ajax 而导致此错误，请调用 $. ajax

然后，您可能需要指定从服务器返回的 < em > dataType 是什么。我已经用这个简单的属性修正了很多响应。

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

我知道这个帖子已经过时了，但是我遇到了另一个问题的原因，其他人可能会觉得有帮助。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);
小开

出现这种情况的另一个原因是，您在元素准备好之前附加。

<body>


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


</body>
</html>

在这种情况下，您需要在。不完全确定这是否合法，但在剧本后面加上剧本似乎没什么帮助:/

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

小开

如果您在尝试将一个节点附加到另一个 Internet Explorer 窗口时遇到了这个问题，请尝试使用节点内部的 HTML 代替节点本身。

myElement.appendChild(myNode.html());

IE 不支持向另一个窗口追加节点。

小开

@ 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.xhtml重命名为 file.html非常简单——应用程序服务器对 MIME 类型的映射有一些扩展。当内容是动态的时候，您可以设置响应的内容类型(例如 Servlet API 中的 res.setContentType("text/html"))。

小开

这个错误发生在我在 IE9中，当我试图将 Child 动态地附加到一个已经存在于窗口 A 中的子窗口 A 时，窗口 A 将创建一个子窗口 B。在窗口 B 中，在某个用户操作之后，一个函数将运行，并使用 window.opener.document.getElementById('formElement').appendChild(input);对窗口 A 中的 form 元素执行阑尾 Child 操作

这会抛出一个错误。与在子窗口中使用 document.createElement('input');创建输入元素一样，将其作为参数传递给 window.opener窗口 A，然后在该窗口中执行追加操作。只有当我在要附加它的同一个窗口中创建 input 元素时，它才会成功而不会出错。

因此，我的结论(请验证) : 没有元素可以在一个窗口中动态创建(使用 document.createElement) ，然后在另一个窗口中添加(使用 .appendChild)到一个元素(没有采取可能是我错过的特定的额外步骤，以确保它不被认为是 XML 或其他东西)。这在 IE9中失败并抛出错误，但在 FF 中可以正常工作。

另外，我不用 jQuery。

小开

只是为了参考。

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 元素。

小开

如果我在 IE9中禁用了脚本调试(Internet Explorer)选项，就会出现这个错误。如果启用脚本调试，我不会看到错误，页面工作正常。DOM 异常与调试(启用或禁用)之间的关系似乎有些奇怪。


提交答案