정확히 무엇이 "HEREARCHY_REQUEST_ERR: DOM 예외 3"-오류를 일으킬 수 있습니까?
jQuery와 정확히 어떤 관계가 있습니까?라이브러리가 내부적으로 네이티브 자바스크립트 기능을 사용하는 것으로 알고 있습니다만, 이러한 문제가 나타날 때마다 정확히 무엇을 하려는 것입니까?
즉, DOM 트리에서 DOM 노드가 이동할 수 없는 위치에 DOM 노드를 삽입하려고 했습니다.가장 일반적으로 볼 수 있는 위치는 Safari에서 다음을 허용하지 않습니다.
document.appendChild(document.createElement('div'));
일반적으로 이는 실제로 의도된 실수일 뿐입니다.
document.body.appendChild(document.createElement('div'));
야생에서 볼 수 있는 다른 원인(댓글을 통해 요약됨):
- 노드를 노드에 추가하려고 합니다.
- 노드에 null을 추가하려고 합니다.
- 텍스트 노드에 노드를 추가하려고 합니다.
- HTML이 잘못되었습니다(예: 대상 노드를 닫지 못함).
- 합니다(" "HTML" "XML" "XML"을 ).
<!doctype html>HTML로 XHR을 때 유형을 합니다.)
jquery agax로 인해 이 오류가 발생할 경우 $.ajax로 전화하십시오.
그런 다음 서버에서 반환되는 dataType을 지정해야 할 수도 있습니다.저는 이 단순한 속성을 이용하여 반응을 많이 고쳤습니다.
$.ajax({
url: "URL_HERE",
dataType: "html",
success: function(response) {
$('#ELEMENT').html(response);
}
});
특히 jQuery를 사용하면 요소를 만들 때 html 태그에 대한 주의 사항을 잊어버린 경우 이 문제가 발생할 수 있습니다.
$("#target").append($("div").text("Test"));
당신이 의미한 것이 이 오류를 제기할 것입니다.
$("#target").append($("<div>").text("Test"));
이 오류는 잘못된 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
@켈리 노튼의 대답은 옳습니다.The browser thinks the HTML you are attempting to append is XML그리고 제안합니다.specifying the content type when fetching via XHR.
하지만 때때로 수정하지 않을 타사 라이브러리를 사용하는 경우도 있습니다.제 경우는 JQuery UI입니다.▁the를 제공해야 .Content-TypeJavaScript 측에서 응답 유형을 재정의하는 대신 응답에서 사용할 수 있습니다.을 합니다.Content-Typetext/html그리고 당신은 괜찮아요.
제 경우, 이름을 바꾸는 것만큼 쉬웠습니다.file.xhtmlfile.html응용 프로그램 서버에 MIME 유형 매핑에 대한 일부 확장이 있습니다. 어떻게든 을 설정할 수 내이동경예응내설유수정있할습다니을형용의답우인적용예(:res.setContentType("text/html")서블릿 API)에 포함됩니다.
다음 질문을 볼 수 있습니다.
Javascript를 사용하여 중첩된 목록을 재귀적으로 생성할 때 HYERIAL_REQUEST_ERR 가져오기
또는
ASP를 사용하는 jQuery UI 대화 상자입니다.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" 오류가 다시 나타나지 않습니다.
Google Chrome 확장 Sidewiki를 사용할 때 이 오류가 발생했습니다.사용하지 않도록 설정하여 문제를 해결했습니다.
2시간 동안 답을 찾아봤기 때문에 여기에 구체적인 답을 하나 더 추가하겠습니다...
문서에 태그를 삽입하려고 했습니다.html은 다음과 같았습니다.
<map id='imageMap' name='imageMap'>
<area shape='circle' coords='55,28,5' href='#' title='1687.01 - 0 percentile' />
</map>
(위의예에태닫있것알수있다니습을는다혀그가서(▁if다있▁is니▁the▁closed▁in▁tag).<area/>) 이것은 크롬 브라우저에서 받아들여지지 않았습니다. w3 학교들은 폐쇄되어야 한다고 생각하는 것 같고, 저는 이 태그에서 공식 사양을 찾을 수 없었지만, 크롬에서는 확실히 작동하지 않습니다.Firefox는 다음과 같이 수락하지 않습니다.<area/>또는<area></area>또는<area>은 크롬이 합니다.<area>IE는 아무거나 다 받아요.
어쨌든, 이 오류는 HTML이 정확하지 않기 때문일 수 있습니다.
이 스레드가 오래된 것은 알지만 다른 사람들이 도움이 될 수 있는 문제의 다른 원인을 발견했습니다.HTML 주석에 Google Analytics를 추가하려고 할 때 오류가 발생했습니다.문제가 되는 코드:
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 창에 존재하는 에 동적으로 Child를 추가하려고 할 때 이 오류가 발생했습니다.창 B창 A 하 창 B 니 다를 합니다. 후 창는 창 하고 appendChild를 합니다.window.opener.document.getElementById('formElement').appendChild(input);
그러면 오류가 발생합니다.다음을 사용하여 입력 요소를 만드는 것과 동일합니다.document.createElement('input');합니다.window.openerA 창, 그리고 거기서 부록을 합니다.추가할 창에 입력 요소를 만들어야 오류 없이 성공할 수 있습니다.
따라서 제 결론은 (확인 부탁드립니다): 어떤 요소도 동적으로 생성될 수 없습니다(사용).document.createElement하나의 창에 추가된 다음 (사용).appendChild) 다른 창의 요소로 이동합니다(XML 등으로 간주되지 않도록 특정 추가 단계를 수행하지 않은 경우).IE9에서는 이 작업이 실패하고 오류가 발생하지만 FF에서는 정상적으로 작동합니다.
PS. 저는 jQuery를 사용하지 않습니다.
이 문제가 발생할 수 있는 또 다른 이유는 요소가 준비되기 전에 추가하기 때문입니다.
<body>
<script>
document.body.appendChild(foo);
</script>
</body>
</html>
이 경우, 다음에 스크립트를 이동해야 합니다. 그게 코셔인지 완전히 확실하지는 않지만 본문 다음에 스크립트를 이동하는 것은 도움이 되지 않는 것 같습니다. :/
스크립트를 이동하는 대신 이벤트 핸들러에서 추가 작업을 수행할 수도 있습니다.
요소를 복제하는 것을 잊어버려서 오류가 발생했습니다.
// creates an error
clone = $("#thing");
clone.appendTo("#somediv");
// does not
clone = $("#thing").clone();
clone.appendTo("#somediv");
참고로.
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로 돔 요소를 만드는 방법을 아직 파악하지 못했습니다.
스크립트 디버깅(Internet Explorer) 옵션을 사용하지 않도록 설정한 경우 IE9에서 이 오류가 발생합니다.스크립트 디버깅을 활성화하면 오류가 표시되지 않고 페이지가 제대로 작동합니다.이는 DOM 예외가 디버깅과 관련하여 활성화 또는 비활성화된 것이 무엇인지 이상하게 보입니다.
언급URL : https://stackoverflow.com/questions/1256394/what-exactly-can-cause-an-hierarchy-request-err-dom-exception-3-error
'programing' 카테고리의 다른 글
| 테이블 고정 헤더 및 스크롤 가능한 본문 (0) | 2023.07.30 |
|---|---|
| 이름이 '수신자'인 양식 제어에 대한 값 접근자가 없습니다. (0) | 2023.07.25 |
| M1 Mac의 'root'@'localhost' 사용자에 대해 'mysql_upgrade' 액세스가 거부되었습니다. (0) | 2023.07.25 |
| \n이 있는 파이썬 스트립 (0) | 2023.07.25 |
| 포인터 산술을 통한 어레이 값 액세스 대 C의 서브스크립션 (0) | 2023.07.25 |