jQuery로 Outer HTML 가져오기

예를들어 요런 HTML 이 있다 치면

<div id="sample">
	<div class="imgholder">
		<img src="/sample/img.png" />
	</div>
	<strong>Alone</strong>
	<div class="meta">by Zsolt Zsigmond</div>
</div>

$("#sample").html(); 로는 sample 안쪽의 html 만 가져올수 있다.

<div class="imgholder">
	<img src="/sample/img.png" />
</div>
<strong>Alone</strong>
<div class="meta">by Zsolt Zsigmond</div>

sample 까지 포함한 html을 가져오기 위한 jQuery 함수는 없는것 같다. 찾아보면 있을지도 -_-?

아무튼 sample 까지 포함한 outer HTML 을 가져오기 위해 outerHTML() function 을 추가해 보자

$.fn.outerHTML = function() {
	var el = $(this);
	if( !el[0] ) return "";

	if (el[0].outerHTML) {
		return el[0].outerHTML;
	} else {
		var content = el.wrap('<p/>').parent().html();
		el.unwrap();
		return content;
	}
}

사용법

console.log($("#sample").outerHTML());
// <div id="sample"><div class="imgholder"><img src="/sample/img.png" /></div>
// <strong>Alone</strong><div class="meta">by Zsolt Zsigmond</div></div>