O que exatamente pode causar um erro "HIERARCHY_REQUEST

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?

javascript jquery domexception Julian Weimer
fonte

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)

Kelly Norton
fonte

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

Dave Robertson
fonte

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

Fatmuemoo
fonte

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

Andrew MacLeod
fonte

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).

Nowaker
fonte

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.

puro
fonte

1

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

Jesse Fowler
fonte

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.

markthegrea
fonte

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

S.Walker
fonte

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.

Dan-Nolan
fonte

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.

Yeti
fonte

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.

allyourcode
fonte

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

code_monk
fonte

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.

T.Ho
fonte

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.

Annapoorni D
fonte

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

Respostas: