innerHTML을 사용하면 선택한 요소의 하위 요소들에 대해서만 알 수 있다. (jquery에서는 html())
자신을 포함한 하위 요소들을 알고 싶다면 outerHTML을 사용하면 된다.
하지만 IE에서만 사용할 수 있다.
jquery를 이용해서 자신을 포함한 하위 요소값을 알아내기
: div1을 포함한 하위 내용들을 div_view_area에 넣기
<div>
<div id="div1" style="display:none;">
<div>내용</div>
</div>
<div id="div2">div2</div>
</div>
<div id="div_view_area"></div>
var tmp = $('#div1').clone().wrapAll('<div/>').parent().html();
$('#div1').remove();
$('#div_view_area').html(tmp);
$('#div1').show();
첫줄을 보면 clone()와 wrapAll()을 이용해서 div1 하위 요소를 복사한 후 새로운 div 요소를 생성해서 감싼다음 parent()로 부모요소로 이동을 했다.
그리고난후 html()을 이용해서 의도한대로 자신을 포함한 하위 요소값을 알아내서 임시 변수(tmp)에 저장을 했다.
tmp = $('#div1').clone().wrapAll('<div/>').parent().html();
두번째줄을 보면 remove()를 사용하는데 clone()를 이용해서 복사를 했기 때문에
세번째줄에서 div_view_area에 내용을 넣으면 같은 요소가 2개가 생성되므로 넣기전에 기존 요소를 삭제를 했다.
$('#div1').remove();
세번째줄에서 div_view_area 하위에 복사한 내용을 넣는다.
$('#div_view_area').html(tmp);
네번째줄에서 div1를 화면에 보여준다.
$('#div1').show();
더보기>
