이건없지

jquery를 이용해서 자기 자신을 포함한 HTML을 알아내기

<script type="text/javascript">

//=== outerHTML : jquery 용
$.fn.outerHTML = function()
{
    var th = $(this);
    if( !th[0] ) return "";
 
    if (th[0].outerHTML)
    {
        return th[0].outerHTML;
    }

    else
    {
        var content = th.wrap('<div>').parent().html();
        th.unwrap();
        return content;
    }
}

alert($('.okkks).outerHTML());

</script>

<div class="okkks">
 <div>okkks.tistory.com</div>
 <div>okkks.tistory.com</div>
 <div>okkks.tistory.com</div>
</div>

더보기>

- jquery 자신을 포함한 html값 알아내기 - innerHTML, outerHTML

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();

더보기>

- jquery outerHTML 구현하기