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

Answers:

227

这意味着您已尝试将DOM节点插入DOM树中无法移动的位置。我看到的最常见的位置是在Safari上，它不允许以下操作：

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

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

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

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

  • 您正在尝试将节点附加到自身
  • 您正在尝试将null附加到节点
  • 您试图将一个节点附加到文本节点。
  • 您的HTML无效（例如，无法关闭目标节点）
  • 浏览器认为您尝试添加的HTML是XML（通过添加<!doctype html>到注入的HTML或通过XHR提取时指定内容类型来修复）
— 凯莉·诺顿（Kelly Norton）
source
49
当您尝试将节点附加到自身时，也会发生该错误。我自己就碰到了这个人:-)
— Ben Clayton，2010年
5
我只是试图将null添加到元素（以及完全不相关的技巧-始终确保您的函数返回您编写的内容以返回：P）
— Veli Gebrev
当目标中缺少结束标记之一时，我看到了这一点。
— 汤姆·H
使用jQuery附加AJAX结果时，IE（9）可能会引发此错误。通过使用response.xml可用的位置来避免这种情况。例如，$(e).append(response.xml || $(response));
— Courtney Christensen 2012年
当我从jQuery（台式机）更改为Android上的zepto时，遇到了这个问题。切换回去。
— 拉文德拉纳丝·阿基拉
5

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

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

$.ajax({
    url: "URL_HERE",
    dataType: "html",
    success: function(response) {
        $('#ELEMENT').html(response);
    }
});
— 戴夫·罗伯逊
source
1
用于web / phonegap的单一代码库，可重构为使用koorchik的答案通过stackoverflow.com/questions/8366733/…动态加载模板。在桌面浏览器中工作，在移动浏览器或本机应用程序中不工作。这个解决方案成功了。
— Kinjal Dixit 2012年
这里同样存在问题，仅在iOS 5中很奇怪。指定dataType有效。谢谢
— homerjam
3

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

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

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

 $("#target").append($("<div>").text("Test"));
— 法穆莫
source
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
— 安德鲁·麦克劳德
source
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.xhtml到file.html-应用程序服务器一样，具有对MIME类型映射的某些扩展。当内容是动态的时，您可以以某种方式设置响应的内容类型（例如，res.setContentType("text/html")在Servlet API中）。

— 诺瓦克
source
1

你可以看到这些问题

使用Java递归生成嵌套列表时获取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”将不会再次出现。

— 纯
source
1

使用Google Chrome扩展程序Sidewiki时遇到此错误。禁用它可以为我解决问题。

— 杰西·福勒
source
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/>或<area></area>或接受它<area>。Chrome必须具备<area>。IE接受任何内容。

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

— 马克特雷格雷
source
1

我知道这个线程很旧，但是我遇到了另一个可能导致此问题的原因。我在尝试将自身附加到HTML注释时遇到了Google Analytics（分析）错误。令人反感的代码：

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);
— 沃克
source
1

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

myElement.appendChild(myNode.html());

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

— 丹·诺兰
source
您真的尝试过吗？即使在Chrome中，我也遇到TypeError：无法在“ Node”上执行“ appendChild”：参数1的类型不是“ Node”。（…）。那是因为.html（）的类型为字符串，而appendChild的类型为Node。
— joedotnot '16
1

在IE9中，当我尝试向窗口A中已经存在的a动态添加appendChild时，发生了此错误。窗口A将创建子窗口B。窗口A中的表单元素使用 window.opener.document.getElementById('formElement').appendChild(input);

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

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

PS。我不使用jQuery。

— 雪人
source
感谢您的指导，我找到了解决此问题的方法。如果您有兴趣，请参阅我发布的答案。
— T.Ho
0

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

<body>

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

</body>
</html>

在这种情况下，您需要将脚本移到之后。不能完全确定是否是犹太洁食，但是在身体后移动脚本似乎无济于事：/

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

— 联盟代码
source
0

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

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

// does not
clone = $("#thing").clone();
clone.appendTo("#somediv");
— code_monk
source
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元素。

— 何Ho
source
0

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

— 安那波尼D
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.