2010-03-20 2 views
11

JavaScript에서 outerHTML을 사용하는 방법은 무엇입니까? 감사합니다JavaScript에서 outerHTML을 사용하는 방법?

+1

다음을 확인하십시오. http://stackoverflow.com/questions/2474605/how-to-convert-a-htmlelement-to-a-string –

+0

[HTMLElement를 문자열로 변환하는 방법 ] (https://stackoverflow.com/questions/2474605/how-to-convert-a-htmlelement-to-a-string) – Graham

답변

10

outerHTML은 요소 자체를 포함하는 요소의 HTML입니다. 이것을 요소 열기 및 닫기 태그 내에 포함 된 HTML의 innerHTML과 비교하십시오. 정의에 따라 여는 태그와 닫는 태그가없는 요소에는 innerHTML이 없습니다.

요소와 그 내용을 완전히 바꾸려면 outerHTML을 사용하십시오. 요소의 내용 만 바꾸려는 경우 innerHTML을 사용하십시오.

7

outerHTML은 요소의 비표준 Internet Explorer 속성입니다. 요소의 html과 그 자식 요소를 반환합니다. 어떤 경우에는 요소를 html 문자열로 완전히 대체하도록 설정할 수 있습니다.

+6

일 년 후 Chrome과 Safari에서도이 기능을 구현 한 것으로 보입니다. 그러나이 글을 쓰는 시점에서 Firefox는 지원하지 않습니다. –

+10

[outerHTML] (https://developer.mozilla.org/en/DOM/element.outerHTML)에 대한 지원이 [Firefox 11] (https://developer.mozilla.org/en/Firefox_11_for_developers)에 추가되었습니다. –

11
function getHTML(node){ 
    if(!node || !node.tagName) return ''; 
    if(node.outerHTML) return node.outerHTML; 

    // polyfill: 
    var wrapper = document.createElement('div'); 
    wrapper.appendChild(node.cloneNode(true)); 
    return wrapper.innerHTML; 
} 
+0

흥미로운 아이디어. 그러나 outerHTML을 지원하지 않는 대부분의 브라우저는 HTMLElement에서 프로토 타이핑을 지원하기 때문에 가상으로 구현하기가 더 쉬울 까? – scunliffe

0

대부분의 인기있는 브라우저는 outerHTML을 지원합니다. Firefox는 예외입니다. outerHTML 브라우저 지원에 대한 자세한 내용은 http://www.quirksmode.org/dom/w3c_html.html을 참조하십시오.

페이지에 jQuery를 추가 할 수있는 경우 플러그인 jQuery outerHTML을 포함하는 것이 좋습니다.

관련 문제