O que exatamente pode causar um erro "HIERARCHY_REQUEST_ERR: DOM Exception 3"?


184

Como exatamente isso se relaciona com o jQuery? Sei que a biblioteca usa funções nativas de javascript internamente, mas o que exatamente ela está tentando fazer sempre que esse problema aparece?

Respostas:


227

Isso significa que você tentou inserir um nó DOM em um local na árvore DOM para onde ele não pode ir. O lugar mais comum é o Safari, que não permite o seguinte:

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

Geralmente, este é apenas um erro em que isso foi realmente planejado:

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

Outras causas vistas na natureza (resumidas nos comentários):

  • Você está tentando anexar um nó a si próprio
  • Você está tentando anexar nulo a um nó
  • Você está tentando anexar um nó a um nó de texto.
  • Seu HTML é inválido (por exemplo, falha ao fechar o nó de destino)
  • O navegador considera que o HTML que você está tentando anexar é XML (corrija adicionando <!doctype html>ao HTML injetado ou especificando o tipo de conteúdo ao buscar por XHR)

49
O erro também ocorre quando você tenta anexar um nó a si próprio. Eu apenas corri para isso mesmo :-)
Ben Clayton

5
Eu só tenho esta tentando adicionar um nulo para um elemento (e uma ponta totalmente alheios - sempre se certificar de suas funções de retornar a coisa que você escreveu-los a voltar: P)
Veli Gebrev

Vi isso quando uma das tags de fechamento estava faltando no alvo.
Tom H

O IE (9) pode gerar esse erro ao usar o jQuery para acrescentar resultados AJAX. Evite isso usando response.xmlquando disponível. Por exemplo,$(e).append(response.xml || $(response));
Courtney Christensen

Entendi isso quando mudei de jQuery (desktop) para zepto no Android. Mudou de volta.
Ravindranath Akila

5

Se você está recebendo este erro devido a uma chamada de jquery ajax, $ .ajax

Talvez seja necessário especificar o que o dataType está retornando do servidor. Corrigi muito a resposta usando essa propriedade simples.

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

1
base de código único para web / phonegap, refatorada para carregar dinamicamente o modelo usando answer by koorchik em stackoverflow.com/questions/8366733/… . funcionou no navegador da área de trabalho, não funcionou no navegador móvel ou aplicativo nativo. esta solução fez o truque.
Kinjal Dixit

Mesmo problema aqui, estranhamente apenas no iOS 5. A especificação do dataType funcionou. Graças
homerjam

3

Especificamente com o jQuery, você pode encontrar esse problema se esquecer os pontos em torno da tag html ao criar elementos:

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

Irá gerar esse erro porque o que você quis dizer foi

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

3

Este erro pode ocorrer quando você tenta inserir um nó no DOM que é HTML inválido, que pode ser algo tão sutil quanto um atributo incorreto, por exemplo:

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

@Kelly Norton está certo em sua resposta The browser thinks the HTML you are attempting to append is XMLe sugere specifying the content type when fetching via XHR.

É verdade, porém, às vezes você usa bibliotecas de terceiros que não vai modificar. É JQuery UI no meu caso. Em seguida, você deve fornecer o direito Content-Typena resposta em vez de substituir o tipo de resposta no lado do JavaScript. Defina seu Content-Typecomo text/htmle você está bem.

No meu caso, foi tão fácil como mudar o nome do file.xhtmlpara file.html- servidor de aplicativos tiveram algum extensão MIME tipos de mapeamentos de fora da caixa. Quando o conteúdo é dinâmico, você pode definir o tipo de resposta do conteúdo de alguma forma (por exemplo, res.setContentType("text/html")na API do Servlet).


1

Você pode ver essas perguntas

Obtendo HIERARCHY_REQUEST_ERR ao usar Javascript para gerar recursivamente uma lista aninhada

ou

Diálogo da UI do jQuery com postagem do botão ASP.NET

A conclusão é

ao tentar usar o acréscimo de função, você deve usar nova variável, como este exemplo

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

No exemplo acima, usa o var "dlg" para executar a função appendTo. O erro "HIERARCHY_REQUEST_ERR" não será exibido novamente.


1

Encontrei este erro ao usar a extensão do Google Chrome Sidewiki. Desativá-lo resolveu o problema para mim.


1

Vou adicionar mais uma resposta específica aqui, porque foram duas horas de busca pela resposta ...

Eu estava tentando injetar uma tag em um documento. O html era assim:

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

Se você notar, a tag está fechada no exemplo anterior ( <area/>). Isso não foi aceito nos navegadores Chrome. O w3schools parece achar que deveria estar fechado e não consegui encontrar as especificações oficiais dessa tag, mas com certeza não funciona no Chrome. O Firefox não aceita com <area/>ou <area></area>ou <area>. O Chrome deve ter <area>. IE aceita qualquer coisa.

De qualquer forma, esse erro pode ocorrer porque seu HTML não está correto.


1

Sei que este tópico é antigo, mas encontrei outra causa do problema que outras pessoas podem achar útil. Eu estava recebendo o erro com o Google Analytics tentando anexar-se a um comentário em HTML. O código incorreto:

document.documentElement.firstChild.appendChild(ga);

Isso estava causando o erro porque meu primeiro elemento foi um comentário em HTML (ou seja, um código de modelo do Dreamweaver).

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

Modifiquei o código incorreto para algo reconhecidamente não à prova de balas, mas melhor:

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

1

Se você enfrentar esse problema ao tentar anexar um nó a outra janela no Internet Explorer, tente usar o HTML dentro do nó em vez do próprio nó.

myElement.appendChild(myNode.html());

O IE não suporta anexar nós a outra janela.


Você realmente tentou isso? Mesmo no Chrome, estou recebendo TypeError: falha ao executar 'appendChild' em 'Node': o parâmetro 1 não é do tipo 'Node'. (…). Isso porque .html () é do tipo string e appendChild está esperando o tipo Node.
joedotnot

1

Esse erro aconteceu comigo no IE9 quando tentei anexar uma criança dinamicamente a uma que já existia em uma janela A. A janela A criaria uma janela filho B. Na janela B, após alguma ação do usuário, uma função seria executada e executaria uma appendChild no elemento de formulário na janela A usando window.opener.document.getElementById('formElement').appendChild(input);

Isso geraria um erro. O mesmo ocorre com a criação do elemento de entrada usando document.createElement('input');na janela filho, passando-o como um parâmetro para a window.openerjanela A e, em seguida, o anexo. Somente se eu criar o elemento de entrada na mesma janela em que o anexaria, ele será bem-sucedido sem erros.

Assim, minha conclusão (verifique): nenhum elemento pode ser criado dinamicamente (usando document.createElement) em uma janela e, em seguida, anexado (usando .appendChild) a um elemento em outra janela (sem dar talvez uma etapa extra específica que perdi para garantir que ele não seja considerado XML ou alguma coisa). Isso falha no IE9 e gera o erro, no FF isso funciona bem.

PS. Eu não uso jQuery.


Graças ao seu ponteiro, descobri uma maneira de contornar isso. Por favor, veja a resposta que eu postei, se você estiver interessado.
T.Ho

0

Outro motivo para isso acontecer é que você está anexando antes que o elemento esteja pronto, por exemplo

<body>

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

</body>
</html>

Nesse caso, você precisará mover o script após o. Não tenho certeza se isso é kosher, mas mover o script após o corpo não parece ajudar: /

Em vez de mover o script, você também pode fazer o acréscimo em um manipulador de eventos.


0

Eu recebi esse erro porque esqueci de clonar meu elemento.

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

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

0

Somente para referência.

O IE bloqueará a adição de qualquer elemento criado em um contexto de janela diferente do contexto da janela ao qual o elemento está sendo anexado.

por exemplo

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

Ainda não descobri como criar um elemento dom com jQuery usando um contexto de janela diferente.


0

Eu recebo esse erro no IE9 se eu tiver desativado a opção de depuração de scripts (Internet Explorer). Se eu ativar a depuração de script, não vejo o erro e a página funciona bem. Parece estranho o que a exceção do DOM tem a ver com a depuração ativada ou desativada.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.