[jQuery] outerHTML 간단하게 구현해서 사용하기

javascript에는 outerHTML이라는 게 있어서 해당 객체의 안의 내용 뿐 아니라 자기 자신을 포함한 코드를 가져올 수가 있습니다.

<h2>공간 학습</h2>
<div id=”p-line”>
<p>회색 공간</p>
</div>

 

이런 소스가 있다고 할 때, 아래처럼 소스를 가져올수가 있습니다.

document.getElementById(“p-line”).innerHTML  (= $(“.p-line”).html())

 <p>회색 공간</p>

 

document.getElementById(“p-line”).outerHTML

 <div class=”p-line”>
<p>회색 공간</p>
</div>

 

jQuery에는 의외로 이런 outerHTML 메소드가 없습니다.

그래서, 만들어 주어서 사용해야 하는데, 의외로 간단히 한줄로 해결할수가 있습니다.

 

 $(“p-line”).clone().wrapAll(“<div/>”).parent().html()

소스를 설명을 하자면…
본인 객체를 복사를 해서 <div> 태그로 자신을 감싼 다음에 부모의 html()을 구하는 방식입니다.

아래 예제에서 [항목 추가] 버튼을 누르면 이 outerHTML로 항목을 추가하고 있음을 알 수 있습니다.

 

저는 부트스트랩을 사용해서 예제를 만들어 보았는데, 필요없다면 부트스트랩 js, css 파일의 링크를 삭제하셔도 됩니다.