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

2020/10/20 17:02 · javascript ·  · 0评论

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

这意味着您已尝试将DOM节点插入到DOM树中无法移动的位置。我在Safari上看到的最常见的地方不允许以下内容:

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

通常,这只是实际意图中的一个错误:

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

在野外看到的其他原因(摘自评论):

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

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

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

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

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

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

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

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

当您尝试将无效的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

@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-Typetext/html,您就可以了。

就我而言,这就像重命名file.xhtmlfile.html应用程序服务器一样容易,它具有开箱即用的MIME类型映射扩展。当内容是动态的时,您可以以某种方式设置响应的内容类型(例如,res.setContentType("text/html")在Servlet API中)。

你可以看到这些问题

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

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

我将在此处添加一个更具体的答案,因为这是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不正确。

我知道这个线程很旧,但是我遇到了另一个可能导致此问题的原因。我在尝试将自身附加到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);

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

myElement.appendChild(myNode.html());

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

在IE9中,当我尝试向窗口A中已经存在的a动态添加appendChild时,发生了此错误。窗口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。

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

<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会阻止附加在与该元素附加到的窗口上下文不同的窗口上下文中创建的任何元素。

例如

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

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

本文地址:http://javascript.askforanswer.com/jiujingshishenmehuidaozhi-hierarchy_request_errdomyichang3cuowu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!