它与 jQuery 究竟有什么关系？我知道该库在内部使用本机 javascript 函数，但是每当出现此类问题时，它究竟想做什么？
究竟是什么导致了“HIERARCHY_REQUEST_ERR：DOM Exception 3”-错误？
IT技术
javascript
jquery
domexception
2021-02-03 07:16:28
6个回答
这意味着您已尝试将 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-Type的text/html，你就没事了。
就我而言，就像重命名file.xhtmlto一样简单file.html- 应用程序服务器具有一些开箱即用的 MIME 类型映射扩展。当内容是动态的时，您可以以某种方式设置响应的内容类型（例如res.setContentType("text/html")在 Servlet API 中）。