到底是什么导致了一个“层次结构request_err: DOM异常3”—错误?

How exactly does it relate to jQuery? I know the library uses native javascript functions internally, but what exactly is it trying to do whenever such a problem appears?

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

15 个解决方案

#1

220

It means you've tried to insert a DOM node into a place in the DOM tree where it cannot go. The most common place I see this is on Safari which doesn't allow the following:

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

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

Generally, this is just a mistake where this was actually intended:

一般来说，这只是一个错误的地方，实际上是故意的:

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

Other causes seen in the wild (summarized from comments):

野生动物的其他原因(摘自评论):

You are attempting to append a node to itself
您正在尝试将一个节点附加到它自己。
You are attempting to append null to a node
您试图将null追加到一个节点。
You are attempting to append a node to a text node.
您正在尝试将一个节点附加到一个文本节点。
Your HTML is invalid (e.g. failing to close your target node)
HTML无效(例如，未能关闭目标节点)
The browser thinks the HTML you are attempting to append is XML (fix by adding <!doctype html> to your injected HTML, or specifying the content type when fetching via XHR)
浏览器认为您试图添加的HTML是XML(通过添加到您的注入的html，或者在通过XHR获取时指定内容类型)

#2

If you are getting this error due to a jquery ajax call $.ajax

如果由于jquery ajax调用$.ajax而导致此错误。

Then you may need to specify what the dataType is coming back from the server. I have fixed the response a lot using this simple property.

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

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

#3

This error can occur when you try to insert a node into the DOM which is invalid HTML, which can be something as subtle as an incorrect attribute, for example:

当您试图将一个节点插入到无效的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

#4

Specifically with jQuery you can run into this issue if forget the carets around the html tag when creating elements:

特别是使用jQuery，如果在创建元素时忘记了在html标记周围的倾斜，您可以遇到这个问题:

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

Will raise this error because what you meant was

会不会提出这个错误，因为你的意思是?

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

#5

@Kelly Norton is right in his answer that The browser thinks the HTML you are attempting to append is XML and suggests specifying the content type when fetching via XHR.

@Kelly Norton在他的回答中是正确的，浏览器认为您试图添加的HTML是XML，并建议在通过XHR获取时指定内容类型。

It's true however you sometimes use third party libraries that you are not going to modify. It's JQuery UI in my case. Then you should provide the right Content-Type in the response instead of overriding the response type on JavaScript side. Set your Content-Type to text/html and you are fine.

不过，您有时会使用不需要修改的第三方库。在我的例子中是JQuery UI。然后，您应该在响应中提供正确的内容类型，而不是在JavaScript方面覆盖响应类型。将内容类型设置为text/html，这样就可以了。

In my case, it was as easy as renaming the file.xhtml to file.html - application server had some extension to MIME types mappings out of the box. When content is dynamic, you can set the content type of response somehow (e.g. res.setContentType("text/html") in Servlet API).

在我的例子中，它和重命名文件一样简单。xhtml文件。html -应用服务器对MIME类型的映射有一些扩展。当内容是动态的，您可以在Servlet API中以某种方式设置响应的内容类型(例如，res.setContentType(“text/html”))。

#6

You can see these questions

你可以看到这些问题。

Getting HIERARCHY_REQUEST_ERR when using Javascript to recursively generate a nested list

当使用Javascript递归地生成一个嵌套列表时，得到分层次request_err。

或

jQuery UI Dialog with ASP.NET button postback

使用ASP的jQuery UI对话框。净按钮回发

The conclusion is

结论是

when you try to use function append, you should use new variable, like this example

当您尝试使用函数append时，您应该使用新的变量，比如这个例子。

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"));
});

In the example above, uses the var "dlg" to run the function appendTo. Then error “HIERARCHY_REQUEST_ERR" will not come out again.

在上面的示例中，使用var“dlg”来运行函数appendTo。然后，错误“分级request_err”将不会再次出现。

#7

I encountered this error when using the Google Chrome extension Sidewiki. Disabling it resolved the issue for me.

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

#8

I'm going to add one more specific answer here because it was a 2 hour search for the answer...

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

I was trying to inject a tag into a document. The html was like this:

我试着给文件注入一个标签。html是这样的:

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

If you notice, the tag is closed in the preceding example (<area/>). This was not accepted in Chrome browsers. w3schools seems to think it should be closed, and I could not find the official spec on this tag, but it sure doesn't work in Chrome. Firefox will not accept it with <area/> or <area></area> or <area>. Chrome must have <area>. IE accepts anything.

如果您注意到，标记将在前面的示例中关闭()。这在Chrome浏览器中是不被接受的。w3schools似乎认为它应该关闭，我在这个标签上找不到官方的规范，但它在Chrome中肯定行不通。Firefox将不会接受或或。Chrome必须 <区> 。即接受任何东西。

Anyway, this error can be because your HTML is not correct.

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

#9

If you run into this problem while trying to append a node into another window in Internet Explorer, try using the HTML inside the node instead of the node itself.

如果在Internet Explorer中试图将一个节点添加到另一个窗口时遇到这个问题，可以尝试在节点中使用HTML而不是节点本身。

myElement.appendChild(myNode.html());

IE doesn't support appending nodes to another window.

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

#10

This ERROR happened to me in IE9 when I tried to appendChild an dynamically to a which already existed in a window A. Window A would create a child window B. In window B after some user action a function would run and do an appendChild on the form element in window A using window.opener.document.getElementById('formElement').appendChild(input);

这个错误发生在我在IE9中当我试图列表末尾的动态已经存在于一个窗口a .窗口将在窗口创建子窗口B B后,一些用户操作一个函数运行和做一个表单元素的列表末尾窗口使用window.opener.document.getElementById(formElement).appendChild(输入);

This would throw an error. Same with creating the input element using document.createElement('input'); in the child window, passing it as a parameter to the window.opener window A, and there do the append. Only if I created the input element in the same window where I was going to append it, it would succeed without errors.

这将抛出一个错误。同样，使用document.createElement('input')创建输入元素;在子窗口中，将其作为参数传递给窗口。打开窗口A，然后在那里添加。只有当我在我要追加它的同一个窗口中创建输入元素时，它才不会出错。

Thus my conclusion (please verify): no element can be dynamically created (using document.createElement) in one window, and then appended (using .appendChild) to an element in another window (without taking maybe a particular extra step I missed to ensure it is not considered XML or something). This fails in IE9 and throws the error, in FF this works fine though.

因此，我的结论(请验证):在一个窗口中不能动态地创建元素(使用document.createElement)，然后在另一个窗口中添加(使用. appendchild)到一个元素(不需要额外添加一个步骤，以确保它不被认为是XML或其他东西)。这在IE9中失败，并抛出错误，但在FF中，这很好。

PS. I don't use jQuery.

我不使用jQuery。

#11

I know this thread is old, but I've encountered another cause of the problem which others might find helpful. I was getting the error with Google Analytics trying to append itself to an HTML comment. The offending code:

我知道这条线很旧，但我遇到了另一个问题，别人可能会觉得有用。我在使用谷歌分析的时候试图将自己添加到一个HTML注释中。出错的代码:

document.documentElement.firstChild.appendChild(ga);

This was causing the error because my first element was an HTML comment (namely a Dreamweaver template code).

这导致了错误，因为我的第一个元素是一个HTML注释(即Dreamweaver模板代码)。

<!-- #BeginTemplate "/Templates/default.dwt.php" -->

I modified the offending code to something admittedly not bulletproof, but better:

我将违规代码修改为不可否认的，但更好的是:

document.documentElement.firstChild.nodeType===1 ? document.documentElement.firstChild.appendChild(ga) : document.documentElement.lastChild.appendChild(ga);

#12

Another reason this can come up is that you are appending before the element is ready e.g.

这可能出现的另一个原因是，在元素准备就绪之前，您就会被追加。

<body>

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

</body>
</html>

In this case, you'll need to move the script after the . Not entirely sure if that's kosher, but moving the script after the body doesn't seem to help :/

在这种情况下，您需要移动脚本。不完全确定这是不是洁食，但是在身体看起来似乎没有帮助的时候移动脚本:/。

Instead of moving the script, you can also do the appending in an event handler.

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

#13

I got that error because I forgot to clone my element.

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

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

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

#14

Just for reference.

仅供参考。

IE will block appending any element created in a different window context from the window context that the element is being appending to.

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'));

I haven't figured out how to create a dom element with jQuery using a different window context yet.

我还没有弄清楚如何使用一个不同的窗口上下文创建一个使用jQuery的dom元素。

#15

I get this error in IE9 if I had disabled script debugging (Internet Explorer) option. If I enable script debugging I don't see the error and the page works fine. This seems odd what is the DOM exception got to do with debugging either enabled or disabled.

如果我禁用了脚本调试(Internet Explorer)选项，我就会在IE9中得到这个错误。如果我启用了脚本调试，我不会看到错误，页面也会正常运行。这看起来很奇怪，DOM异常与启用或禁用调试有关。

#1

220