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

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

181 голосов
/ 10 августа 2009

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

Ответы [ 15 ]

222 голосов
/ 11 августа 2009

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

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

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

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

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

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

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

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

$.ajax({
    url: "URL_HERE",
    dataType: "html",
    success: function(response) {
        $('#ELEMENT').html(response);
    }
});
3 голосов
/ 01 апреля 2012

Эта ошибка может возникать, когда вы пытаетесь вставить в 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
3 голосов
/ 17 февраля 2012

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

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

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

 $("#target").append($("<div>").text("Test"));
2 голосов
/ 19 ноября 2012

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

1 голос
/ 14 января 2013

Эта ОШИБКА произошла со мной в IE9, когда я попытался динамически присоединить Child к объекту, который уже существовал в окне A. Окно 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.

1 голос
/ 30 октября 2012

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

myElement.appendChild(myNode.html());

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

1 голос
/ 05 декабря 2011

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

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

1 голос
/ 12 июля 2011

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

1 голос
/ 30 мая 2011

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

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

или

jQuery UI Dialog с обратной передачей кнопки 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» больше не будет появляться.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...