[javascript] “HIERARCHY_REQUEST_ERR : DOM 예외 3”-오류가 발생하는 원인은 무엇입니까?

jQuery와 정확히 어떤 관련이 있습니까? 라이브러리가 내부에서 네이티브 자바 스크립트 함수를 사용한다는 것을 알고 있지만 그러한 문제가 나타날 때마다 정확히 무엇을하려고합니까?

답변

이는 DOM 노드를 DOM 트리에서 이동할 수없는 곳에 삽입하려고 시도했음을 의미합니다. 내가 볼 수있는 가장 일반적인 장소는 Safari에서 다음을 허용하지 않습니다.

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

일반적으로 이것은 실제로 의도 된 실수 일뿐입니다.

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

야생에서 볼 수있는 다른 원인 (의견에서 요약) :

노드를 자체에 추가하려고합니다.
노드에 널을 추가하려고합니다.
텍스트 노드에 노드를 추가하려고합니다.
HTML이 유효하지 않습니다 (예 : 대상 노드를 닫지 못함)
브라우저는 추가하려는 HTML이 XML이라고 생각합니다 ( <!doctype html>삽입 된 HTML 에 추가 하거나 XHR을 통해 페치 할 때 컨텐츠 유형을 지정하여 수정 )

답변

jquery ajax 호출로 인해이 오류가 발생하면 $ .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

답변

@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”오류가 다시 발생하지 않습니다.

답변

Chrome 확장 프로그램 사이드 위키를 사용할 때이 오류가 발생했습니다. 사용 중지하면 문제가 해결되었습니다.