Question

它与jQuery的确切关系如何？我知道这个库在内部使用原生的javascript函数，但是只要出现这样的问题，它究竟会尝试做什么？

Answer 1

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

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

一般来说，这只是一个错误，实际上是这样的：

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

野外看到的其他原因（摘自评论）：

您正在尝试将节点附加到自身
您正尝试将null附加到节点
您正在尝试将节点附加到文本节点。
您的HTML无效（例如，无法关闭目标节点）
浏览器认为您尝试附加的HTML是XML（通过向注入的HTML添加<!doctype html>进行修复，或者在通过XHR获取时指定内容类型）

Answer 2

如果由于jquery ajax调用$ .ajax

而收到此错误

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

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

Answer 3

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

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

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

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

Answer 4

当您尝试将节点插入到无效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

Answer 5

@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")）。

Answer 6

您可以看到这些问题

Getting HIERARCHY_REQUEST_ERR when using Javascript to recursively generate a nested list

或

jQuery UI Dialog with ASP.NET button postback

结论是

当您尝试使用函数追加时，您应该使用新变量，例如此示例

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

Answer 7

使用Google Chrome扩展程序边栏评注时遇到此错误。禁用它解决了我的问题。

Answer 8

我将在这里添加一个更具体的答案，因为这是一个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/>或<area></area>或<area>接受它。 Chrome必须为<area>。 IE接受任何东西。

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

Answer 9

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

myElement.appendChild(myNode.html());

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

Answer 10

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

在窗口A中的表单元素上添加appendChild

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

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

PS。我不使用jQuery。

Answer 11

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

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

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

Answer 12

我知道这个帖子已经老了，但是我遇到了其他人可能会觉得有用的问题。我收到了谷歌分析的错误，试图将自己附加到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);

Answer 13

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

<body>

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

</body>
</html>

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

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

Answer 14

仅供参考。

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

e.g

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

Answer 15

如果我禁用了脚本调试（Internet Explorer）选项，我在IE9中会收到此错误。如果我启用脚本调试，我没有看到错误，页面工作正常。这似乎很奇怪，在调试启用或禁用时，DOM异常是什么。

究竟是什么导致“HIERARCHY_REQUEST_ERR：DOM异常3” - 错误？

15 个答案: