Что именно может вызвать ошибку «HIERARCHY_REQUEST

184

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

javascript jquery domexception Джулиан Ваймер
источник

227

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

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

Вообще, это просто ошибка, когда это было задумано:

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

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

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

Келли Нортон
источник

49

Ошибка также возникает, когда вы пытаетесь добавить узел к себе. Я только столкнулся с этим сам :-)

Бен Клэйтон

5

Я только что получил это, пытаясь добавить нуль к элементу (и совершенно не связанный совет - всегда проверяйте, чтобы ваши функции возвращали то, что вы написали, чтобы они возвращали: P)

Вели Гебрев

Я видел это, когда один из закрывающих тегов не попадал в цель.

Том Х

IE (9) может выдать эту ошибку при использовании jQuery для добавления результатов AJAX. Избегайте этого, используя, response.xmlгде это возможно. Например,$(e).append(response.xml || $(response));

Кортни Кристенсен

Получил это, когда я перешел с jQuery (рабочий стол) на zepto на Android. Перешел обратно.

Равиндранат Акила

5

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

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

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

Дейв Робертсон
источник

1

единая база кода для web / phonegap, реорганизованная для динамической загрузки шаблона с использованием ответа koorchik на stackoverflow.com/questions/8366733/… . работал в настольном браузере, не работал в мобильном браузере или родном приложении. это решение помогло.

Кинджал Диксит

Та же проблема здесь, странно только в iOS 5. Задание dataType сработало. Спасибо

homerjam

3

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

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

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

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

Fatmuemoo
источник

3

Эта ошибка может возникать, когда вы пытаетесь вставить в 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

Эндрю Маклеод
источник

2

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

Nowaker
источник

1

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

Получение 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» больше не будет появляться.

чистый
источник

1

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

Джесси Фаулер
источник

1

Я собираюсь добавить еще один конкретный ответ здесь, потому что это был двухчасовой поиск ответа ...

Я пытался вставить тег в документ. 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>. Хром должен иметь <area>. IE принимает все.

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

markthegrea
источник

1

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

S.Walker
источник

1

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

myElement.appendChild(myNode.html());

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

Dan-Нолан
источник

Вы действительно пробовали это? Даже в Chrome я получаю TypeError: Не удалось выполнить 'appendChild' на 'Node': параметр 1 не относится к типу 'Node'. (…). Это потому, что .html () имеет тип string, а appendChild ожидает тип Node.

joedotnot

1

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

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

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

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

Йети
источник

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

T.Ho

0

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

<body>

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

</body>
</html>

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

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

allyourcode
источник

0

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

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

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

code_monk
источник

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

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

T.Ho
источник

0

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

Аннапорни Д
источник

Что именно может вызвать ошибку «HIERARCHY_REQUEST_ERR: DOM Exception 3»?

Ответы: