<div id="testdiv">
<a href="#">test</a>
</div>
예를 들어 위와같은 소스가 있을때 testdiv의 innerHTML은 <a href="#">test</a> 입니다. testdiv 엘리먼트를 선택하고 innerHTML을 하면 a태그부터 가져올 수 있지만 div태그는 가져오지 못합니다. 자기 자신은 innerHTML에 포함되지 않죠. 간단한 소스야 가능하지만 DOM트리가 복잡할때는 div부터 HTML태그를 가져오려면 좀 난감할 때가 있습니다. jQuery로는 $("#testdiv").html()을 하면 a태그만 나옵니다.
그래서 IE에서는 자신의 태그까지 리턴해 주는 outerHTML이란 녀석이 있지만 IE에서만 지원하기 때문에 사실상 별로 의미는 없습니다.
이거 때문에 꽤 고민하고 있었는데 jQuery를 이용해서 간단하게 할 수 있더군요.
$("...").clone().wrapAll("<div/>").parent().html();
위의 HTML에서는 $("#testdiv").clone().wrapAll("<div/>").parent().html();를 하면 됩니다. 선택한 엘리먼트 집합의 복사본을 만들고 wrapAll을 이용해서 div로 전체를 감싸버린 뒤 parent()로 div로 올라가서 그안에 html()을 가져오면 $("#testdiv") 자체의 HTML을 가져올 수 있습니다.(jQuery 체인의 강력함이 느껴지는 순간이군요. ㅎ)
참고 URL : A jQuery outerHTML one-liner
전혀 간단치 않군요....
jquery 없이 해보시면 생각이 달라지실 겁니다.
$("#testdiv")[0].outerHTML
간단하게도 된답니다.
글을 자세히 안읽으신듯 한데 글에도 outerHTML에 대한 언급이 나와있고 지금은 지원이 대부분 되지만 2009년도 글쓸 당시에는 IE만 지원하는 속성이었습니다. 파이어폭스는 11부터 지원하기 시작했네요.
지나가다2님은 jquery의 셀렉터가 무엇을 반환하는지부터 아셔야......
"지나가다2" 님 감사 합니다. 필요했던 기능인데 덕분에 배워가네요 ^^
주인장님은 지나가다2님이 잘 알려주셨는데도 본인글에 대한 자부심이 강하신건지
수긍하지 않는것 같군요. 본인도 잘쓰셨지만 "지나가다2" 님이 태클건게 아니고
다른 내용도 있다고 알려주신거니 받아들일건 받아들이세요 ㅋㅋ
상황을 설명한거지 되고 받아들이고 말고 할게 없습니다. 틀린 내용이라면 본문을 수정했겠지만 말씀하신대로 추가정보이므로 상황을 설명한 것 뿐입니다.
지나가다2에 대한 주인장의 댓글에서 안타까움이 느껴짐. 또한, 지나가다3 같은 부류는 그냥 복잡하고 길고 자기가 이해하기 힘든건 피해가고 짧고 보기 편하다고 뒷일은 생각안하고 당장 되기만 하면 된다는 식.. 깊은 이해도 없고.. 크게 되기 힘든 부류.
다들 원문은 읽고 댓글은 다시는지 쥔장님 잘 읽고 갑니다!!
네 ^^
주인장 말이 맞음 저때 당시 outerHTML은 IE만이 지원했고
이제와서 되는데? 라 하는건 쫌.. ㅋㅋ 글 안읽은게 맞음
한동안 이 방식으로 쓰다가 오늘 삽질했습니다.
checkbox 나 radio 버튼에 checked 된 속성들은 사라져버리네요 ㅎㅎ...
오래된 내용이라 그사이에 변경사항이 있나 해서 http://jsfiddle.net/outsider/gh8skg71/1/ 에서 테스트해보았는데 저는 checked 속성도 잘 오는데 혹시 다른 브라우저나 환경에서 문제가 있나요?
업무 하다가 고민했는데 구글링으로 들어와서 무릎을 탁 치고 갑니다~ 감사용
이것때문에 한참을 고민했는데 감사합니다 ㅜㅜ
저희 회사는 표준환경이 IE라서 outHTML 만으로 조치가 가능하였으며 이 글이 도움이 되었습니다. Outsider님, 지나가다2님 모두 감사드리며 오래된 글이긴 합니다만, 개발자들 끼리 서로를 존중하는 마음을 가지면 좋겠습니다.ㅎ
지나가다 123은 다중인격인듯합니다. 주인장님 감사합니다