답변:
이는 DOM 노드를 DOM 트리에서 이동할 수없는 곳에 삽입하려고 시도했음을 의미합니다. 내가 볼 수있는 가장 일반적인 장소는 Safari에서 다음을 허용하지 않습니다.
document.appendChild(document.createElement('div'));일반적으로 이것은 실제로 의도 된 실수 일뿐입니다.
document.body.appendChild(document.createElement('div'));야생에서 볼 수있는 다른 원인 (의견에서 요약) :
<!doctype html>삽입 된 HTML 에 추가 하거나 XHR을 통해 페치 할 때 컨텐츠 유형을 지정하여 수정 )response.xml가능한 경우 사용 하여 이것을 피하십시오 . 예를 들면 다음과 같습니다.$(e).append(response.xml || $(response));
jquery ajax 호출로 인해이 오류가 발생하면 $ .ajax를 호출하십시오.
그런 다음 서버에서 dataType 이 돌아 오는 것을 지정해야 할 수도 있습니다 . 이 간단한 속성을 사용하여 응답을 많이 수정했습니다.
$.ajax({
url: "URL_HERE",
dataType: "html",
success: function(response) {
$('#ELEMENT').html(response);
}
});
이 오류는 유효하지 않은 HTML 인 DOM에 노드를 삽입하려고 할 때 발생할 수 있습니다. 예를 들어, 잘못된 속성만큼 미묘 할 수 있습니다.
// <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
@Kelly Norton은 그의 대답에 맞으며 The browser thinks the HTML you are attempting to append is XML제안 specifying the content type when fetching via XHR합니다.
그러나 때로는 수정하지 않을 타사 라이브러리를 사용하는 것이 사실입니다. 필자의 경우 JQuery UI입니다. 그런 다음 Content-TypeJavaScript 측의 응답 유형을 재정의하는 대신 응답에 올바른 권한 을 제공해야합니다 . 사용자의 설정 Content-Type에 text/html와 당신이 벌금을.
쉽게 이름을 변경 한 내 경우에는, 그것은이었다 file.xhtml에 file.html응용 프로그램 서버를 밖으로 상자의 MIME 타입 매핑 일부 확장했다 -. 컨텐츠가 동적 일 때 컨텐츠 유형의 응답을 어떻게 든 설정할 수 있습니다 (예 : res.setContentType("text/html")서블릿 API).
이 질문들을 볼 수 있습니다
Javascript를 사용하여 중첩 목록을 재귀 적으로 생성 할 때 HIERARCHY_REQUEST_ERR 가져 오기
또는
ASP.NET 버튼 포스트 백이있는 jQuery UI 대화 상자
결론은
함수 추가를 사용하려고 할 때이 예제와 같이 새 변수를 사용해야합니다
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"오류가 다시 발생하지 않습니다.
답변을 2 시간 동안 검색했기 때문에 여기에 하나 더 구체적인 답변을 추가 할 것입니다 ...
문서에 태그를 삽입하려고했습니다. 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>. Chrome에이 있어야합니다 <area>. IE는 무엇이든 받아들입니다.
어쨌든이 오류는 HTML이 올바르지 않기 때문에 발생할 수 있습니다.
이 스레드가 오래되었다는 것을 알고 있지만 다른 사람들이 도움이 될 수있는 다른 원인이 발생했습니다. 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);Internet Explorer에서 다른 창에 노드를 추가하려고 할 때이 문제가 발생하면 노드 자체 대신 HTML을 사용하십시오.
myElement.appendChild(myNode.html());IE는 다른 창에 노드를 추가하는 것을 지원하지 않습니다.
이 오류는 IE9에서 이미 윈도우 A에 이미 존재하는 것에 동적으로 childChild를 추가하려고 시도했을 때 나에게 발생했습니다. 윈도우 A는 자식 윈도우 B를 만듭니다. 일부 사용자 작업 후 윈도우 B에서 함수가 실행되고 appendChild를 수행합니다. 를 사용하여 창 A의 양식 요소 window.opener.document.getElementById('formElement').appendChild(input);
오류가 발생합니다. document.createElement('input');자식 창에서를 사용하여 입력 요소를 작성하고 이를 window.opener창 A에 매개 변수로 전달 하면 추가가 수행됩니다. 입력 요소를 추가하려는 동일한 창에서 입력 요소를 만든 경우에만 오류없이 성공합니다.
따라서 내 결론 (확인하십시오) : document.createElement한 창에서 요소를 동적으로 생성 (사용 ) 한 다음 .appendChild다른 창의 요소에 (사용 ) 추가 할 수 없습니다 (XML을 고려하지 않기 위해 놓친 특정 추가 단계를 수행하지 않고도) 또는 뭔가). IE9에서는 실패하고 오류가 발생하지만 FF에서는 정상적으로 작동합니다.
추신. jQuery를 사용하지 않습니다.
이것이 일어날 수있는 또 다른 이유는 요소가 준비되기 전에 추가하고 있기 때문입니다.
<body>
<script>
document.body.appendChild(foo);
</script>
</body>
</html>이 경우 스크립트 다음에서 스크립트를 이동해야합니다. 그것이 정결한지 확실하지 않지만 본문 후에 스크립트를 이동해도 도움이되지 않는 것 같습니다 : /
스크립트를 이동하는 대신 이벤트 핸들러에서 추가를 수행 할 수도 있습니다.
참고로
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'));아직 다른 창 컨텍스트를 사용하여 jQuery로 dom 요소를 만드는 방법을 알지 못했습니다.