Что именно может вызвать "HIERARCHY_REQUEST_ERR: DOM Exception 3" -Error?

Как именно это связано с jQuery? Я знаю, что библиотека использует внутренние функции javascript внутри, но что именно она пытается делать всякий раз, когда возникает такая проблема?

ОТВЕТЫ

Ответ 1

Это означает, что вы пытались вставить DOM node в место в дереве DOM, где оно не может идти. Наиболее распространенное место, которое я вижу в Safari, не позволяет:

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

Как правило, это просто ошибка, когда это было на самом деле предназначено:

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

Другие причины, наблюдаемые в дикой природе (кратко из комментариев):

  • Вы пытаетесь добавить node к себе
  • Вы пытаетесь добавить null к node
  • Вы пытаетесь добавить node в текст node.
  • Ваш HTML недопустим (например, если вы не закрываете цель node)
  • Браузер считает, что HTML, который вы пытаетесь добавить, - это XML (исправить добавлением <!doctype html> к введенному HTML или указать тип содержимого при извлечении через XHR)

Ответ 2

Если вы получаете эту ошибку из-за jQuery ajax-вызова $.ajax

Затем вам может потребоваться указать, что возвращает dataType с сервера. Я исправил ответ, используя это простое свойство.

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

Ответ 3

В частности, с помощью jQuery вы можете столкнуться с этой проблемой, если запустите элементы управления вокруг тега html при создании элементов:

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

Поднимет эту ошибку, потому что вы имели в виду

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

Ответ 4

Эта ошибка может возникнуть при попытке вставить node в DOM, который является недопустимым HTML, который может быть чем-то таким же тонким, как и неправильный атрибут, например:

// <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

Ответ 5

@Келли Нортон прав в своем ответе, что 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).

Ответ 6

Вы можете видеть эти вопросы.

Получение HIERARCHY_REQUEST_ERR при использовании Javascript для рекурсивного создания вложенного списка

или

диалоговое окно jQuery UI с обратной записью кнопки ASP.NET

Вывод:

когда вы пытаетесь использовать функцию 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"));
});

В приведенном выше примере используется var "dlg" для запуска функции appendTo. Тогда ошибка "HIERARCHY_REQUEST_ERR" не выйдет снова.

Ответ 7

Я столкнулся с этой ошибкой при использовании расширений Sidewiki Google Chrome. Отключение этого разрешило проблему для меня.

Ответ 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 кажется, что он должен быть закрыт, и я не мог найти официальную спецификацию в этом теге, но он уверен, что не работает в Хром. Firefox не будет принимать его с помощью <area/> или <area></area> или <area>. Chrome должен иметь <area>. IE принимает что-либо.

В любом случае, эта ошибка может быть вызвана тем, что ваш HTML-код неверен.

Ответ 9

Если вы столкнулись с этой проблемой при попытке добавить node в другое окно в Internet Explorer, попробуйте использовать HTML внутри node вместо самого node.

myElement.appendChild(myNode.html());

IE не поддерживает добавление узлов в другое окно.

Ответ 10

Эта ошибка произошла со мной в IE9, когда я попытался добавить appendChild динамически к уже существующему в окне A. Window A создаст дочернее окно B. В окне B после некоторого действия пользователя будет выполняться функция и выполнить appendChild в элементе формы в окне A с помощью window.opener.document.getElementById('formElement').appendChild(input);

Это вызовет ошибку. То же самое с созданием элемента ввода с помощью document.createElement('input'); в дочернем окне, передавая его как параметр в окно window.opener A, и там добавляется. Только если я создал элемент ввода в том же окне, в котором я собирался его добавить, он будет успешным без ошибок.

Таким образом, мой вывод (пожалуйста, проверьте): ни один элемент не может быть динамически создан (с использованием document.createElement) в одном окне, а затем добавлен (используя .appendChild) к элементу в другом окне (без принятия, возможно, особого шага Я пропустил, чтобы убедиться, что это не считается XML или что-то в этом роде). Это не работает в IE9 и выдает ошибку, в FF это прекрасно работает.

PS. Я не использую jQuery.

Ответ 11

Я получил эту ошибку, потому что забыл клонировать мой элемент.

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

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

Ответ 12

Я знаю, что эта ветка устарела, но я столкнулся с другой причиной проблемы, которую другие могут найти полезной. Я получаю сообщение об ошибке, когда Google Analytics пытается добавить комментарий к 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);

Ответ 13

Другая причина, по которой это может возникнуть, заключается в том, что вы добавляете до того, как элемент готов, например.

<body>

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

</body>
</html>

В этом случае вам нужно переместить script после. Не совсем уверен, что этот кошер, но перемещение script после тела, похоже, не помогает:/

Вместо перемещения script вы также можете выполнить добавление в обработчике событий.

Ответ 14

Просто для справки.

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

Я еще не понял, как создать элемент dom с jQuery, используя другой контекст окна.

Ответ 15

Я получаю эту ошибку в IE9, если у меня отключена опция script debugging (Internet Explorer). Если я включу script отладки, я не вижу ошибки, и страница работает нормально. Кажется странным, что исключение DOM связано с отключением или отключением отладки.