189

它与 jQuery 到底有什么关系？我知道该库在内部使用本机 javascript 函数，但是每当出现此类问题时，它到底想做什么？

4

15 回答 15

234

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

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

通常，这只是实际意图的错误：

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

在野外看到的其他原因（从评论中总结）：

  • 您正在尝试将节点附加到自身
  • 您正在尝试将 null 附加到节点
  • 您正在尝试将节点附加到文本节点。
  • 您的 HTML 无效（例如未能关闭您的目标节点）
  • 浏览器认为您尝试附加的 HTML 是 XML（通过添加<!doctype html>到注入的 HTML 来修复，或者在通过 XHR 获取时指定内容类型）
于 2009-08-11T03:58:32.793 回答
5

如果由于 jquery ajax 调用 $.ajax 而收到此错误

然后您可能需要指定从服务器返回的数据类型。我已经使用这个简单的属性修复了很多响应。

$.ajax({
    url: "URL_HERE",
    dataType: "html",
    success: function(response) {
        $('#ELEMENT').html(response);
    }
});
于 2012-05-15T21:54:29.000 回答
3

特别是使用 jQuery，如果在创建元素时忘记了 html 标记周围的插入符号，您可能会遇到此问题：

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

会引发这个错误，因为你的意思是

 $("#target").append($("<div>").text("Test"));
于 2012-02-17T16:43:05.733 回答
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
于 2012-04-01T13:45:19.387 回答
2

@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.xhtmlto一样简单file.html——应用程序服务器对 MIME 类型映射进行了一些扩展，开箱即用。当内容是动态的时，您可以以某种方式设置响应的内容类型（例如res.setContentType("text/html")在 Servlet API 中）。

于 2012-11-19T10:57:56.073 回答
1

你可以看到这些问题

使用 Javascript 递归生成嵌套列表时获取 HIERARCHY_REQUEST_ERR

或者

带有 ASP.NET 按钮回发的 jQuery UI 对话框

结论是

当您尝试使用函数追加时，您应该使用新变量，例如这个例子

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”将不会再次出现。

于 2011-05-30T09:42:45.393 回答
1

我在使用 Google Chrome 扩展边栏评注时遇到了这个错误。禁用它为我解决了这个问题。

于 2011-07-11T21:03:16.247 回答
1

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

我试图将标签注入文档。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>。铬必须有<area>. IE 接受任何东西。

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

于 2011-12-05T16:23:44.570 回答
1

我知道这个线程很旧，但我遇到了另一个问题的原因，其他人可能会觉得有帮助。我在 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);
于 2012-09-13T01:25:48.280 回答
1

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

myElement.appendChild(myNode.html());

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

于 2012-10-29T20:54:14.393 回答
1

这个错误在 IE9 中发生在我身上，当时我试图将一个动态追加到窗口 A 中已经存在的一个。窗口 A 将创建一个子窗口 B。在窗口 B 中，在某些用户操作后，一个函数将运行并在窗口 A 中的表单元素使用window.opener.document.getElementById('formElement').appendChild(input);

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

因此我的结论（请验证）：不能document.createElement在一个窗口中动态创建（使用）任何元素，然后将（使用.appendChild）附加到另一个窗口中的元素（无需采取我错过的特定额外步骤以确保它不被视为 XML或者其他的东西）。这在 IE9 中失败并引发错误，但在 FF 中这工作正常。

PS。我不使用 jQuery。

于 2013-01-13T23:36:39.057 回答
0

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

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

// does not
clone = $("#thing").clone();
clone.appendTo("#somediv");
于 2012-03-20T20:47:41.580 回答
0

这可能出现的另一个原因是您在元素准备好之前进行附加，例如

<body>

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

</body>
</html>

在这种情况下，您需要将脚本移到 . 不完全确定这是否是犹太洁食，但在身体之后移动脚本似乎没有帮助：/

除了移动脚本，您还可以在事件处理程序中进行附加。

于 2012-10-17T17:58:58.907 回答
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 元素。

于 2013-02-08T02:25:23.010 回答
0

如果我禁用了脚本调试 (Internet Explorer) 选项，我会在 IE9 中收到此错误。如果我启用脚本调试，我看不到错误并且页面工作正常。这似乎很奇怪，DOM 异常与启用或禁用调试有什么关系。

于 2013-02-22T12:19:41.053 回答