jQuery 공작소 : .html()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

html 메서드는 지정한 요소의 html 내용을 읽어오거나 쓸 수 있습니다.
자바스크립트의 innerHTML 속성과 같습니다.

예제 1
HTML 태그 읽어오기
보기
jQuery 공작소에 방문해 주셔서 감사드립니다. 데헷
jQuery 공작소에 방문해 주셔서 감사드립니다. 데헷

위 내용의 html 태그


소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid silver;
        padding : 20px;
        text-align : center;
    }
    .css_test2 {
        text-align : center;
        display : none;
    }
    .css_test2 textarea {
        width : 90%;
        height : 100px;
    }
</style>

<div class="css_test">
    jQuery 공작소에 방문해 주셔서 감사드립니다. <b>데헷</b><br>
    jQuery 공작소에 방문해 주셔서 감사드립니다. <b>데헷</b><br>
</div>
<div class="css_test2">
    <br>
    위 내용의 html 태그<br>
    <textarea name="html" class=""></textarea><br>
    <br>
</div>
<button type="button" onclick="j_test()">눌러보세용</button>

<script type="text/javascript">
    function j_test(){
        var html = $('.css_test').html();
        $('.css_test2').show();
        $('.css_test2 textarea').val(html);
    }
</script>
관련 CSS
borderborder-radiusdisplayheightpaddingtext-alignwidth
jQuery

- 지정한 대상의 html 태그를 읽어옵니다.

$( '.css_test' ).html()  -  클래스명이 css_test 인것의 html 태그를 읽어옵니다.

예제 2
지정한 대상을 포함한 HTML 태그 읽어오기
보기
jQuery 공작소에 방문해 주셔서 감사드립니다. 데헷
jQuery 공작소에 방문해 주셔서 감사드립니다. 데헷

위 내용의 html 태그


소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid silver;
        padding : 20px;
        text-align : center;
    }
    .css_test2 {
        text-align : center;
        display : none;
    }
    .css_test2 textarea {
        width : 90%;
        height : 100px;
    }
</style>

<div class="css_test">
    jQuery 공작소에 방문해 주셔서 감사드립니다. <b>데헷</b><br>
    jQuery 공작소에 방문해 주셔서 감사드립니다. <b>데헷</b><br>
</div>
<div class="css_test2">
    <br>
    위 내용의 html 태그<br>
    <textarea name="html" class=""></textarea><br>
    <br>
</div>
<button type="button" onclick="j_test()">눌러보세용</button>

<script type="text/javascript">
    function j_test(){
        var html = $('.css_test')[0].outerHTML; // outerHTML 을 이용하여 가져옵니다. (제이쿼리 아님)
        $('.css_test2').show();
        $('.css_test2 textarea').val(html);
    }
</script>
관련 CSS
borderborder-radiusdisplayheightpaddingtext-alignwidth
jQuery

- 지정한 대상을 포함하여 html 태그를 읽어옵니다.
- 제이쿼리 자체만으로는 안되고 자바스크립트의 outerHTML 속성을 이용합니다.

$( '.css_test' )[0].outerHTML  -  클래스명이 css_test 인것을 포함한 html 태그를 읽어옵니다.
$( '.css_test' )[0]  -  클래스명이 css_test 인 것의 객체를 반환합니다. [0]은 배열의 첫번째를 의미합니다.

제이쿼리 셀렉터의 결과는 배열형태로 반환됩니다. 바로 받아서 처리하고 싶다면 [0] 처럼 사용하면 됩니다.
결과물이 여러개인 경우는 [1] [2] 이렇게 접근할 수 있습니다. 결과물이 하나더라도 배열이므로 [0] 하세요 ^^

예제 3
HTML 태그 쓰기
보기
아래 버튼을 눌러보세요 ^^
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid silver;
        margin-bottom : 10px;
        padding : 20px;
        text-align : center;
    }
</style>

<div class="css_test">
    아래 버튼을 눌러보세요 ^^
</div>

<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/215D8239550B923E04')">사진1</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/26138D4854D7351522')">사진2</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2430183D552F509D16')">사진3</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2132CA4F54D7351720')">사진4</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/234BC24D55AC84AA1C')">사진5</button>

<script type="text/javascript">
    function j_test(src){
        $('.css_test').html('<img src="' + src + '">');
    }
</script>
관련 CSS
borderborder-radiusmargin-bottompaddingtext-align
jQuery

- 지정한 대상에 html 태그를 씁니다.

$( '.css_test' ).html( 태그내용 )  -  클래스명이 css_test 인것에 html 태그를 씁니다

+ 관련 jQuery +
jQuery 홈페이지 .html() API 문서 : http://api.jquery.com/html/
☞ 목록으로 가기
jQuery 공작소  /   CSS 공작소