[jQuery]jQuery로 outerHTML처럼 사용하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Javascript에는 innerHTML이 있습니다. 선택한 Dom객체의 내부 HTML을 가지고 있는 프로퍼티라고 할 수 있습니다. (Javascript가 아니라 DOM에 있는건가요? 흠..)

Html

<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 체인의 강력함이 느껴지는 순간이군요. ㅎ)