Javascript 예제
jQuery로 Outer HTML 가져오기
스토브
2012. 11. 6. 16:56
예를들어 요런 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>