[jquery] html 메서드 정리

안녕하세요. 비스카이비전입니다. 오늘은 jquery의 html 메서드에 대해 알아보겠습니다. jquery의 html 메서드로는 크게 두가지 일을 할 수 있습니다.

 

1. 요소 내 html 코드 얻기 

첫번째는 요소가 가지고 있는 html 코드를 가져오는 것입니다. 

 

<div id="title">
    <h1>bskyvision</h1>
    <h2>티스토리 블로그</h2>
</div>
 
<p>안녕하세요. bskyvision입니다.</p>
 
 
<script>
    var title = $('#title').html();
    alert(title);
</script>

 

위 코드를 실행하면 아이디가 title인 요소 안의 html 코드를 경고창에 띄워줍니다.

 

 

아이디가 title인 div 요소 내 html 코드를 경고창에 잘 띄워줬죠?

 

2. 요소 내 html 코드 변경

html() 메서드로 할 수 있는 두번째 일은 어떤 요소가 가지고 있는 html 코드를 변경해주는 것입니다. 

 

<div id="title">
    <h1>bskyvision</h1>
    <h2>티스토리 블로그</h2>
</div>
 
<p>안녕하세요. bskyvision입니다.</p>
 
 
<script>
    $('#title').click(function(){
        $('#title').html('<h1>naver</h1><h2>포털사이트</h2>');
    });
</script>

 

이렇게 코딩하면 id가 title인 요소를 클릭하면, 그 안의 html 코드가 html() 메서드 내 코드로 바뀝니다. 따라서 다음과 같이 작동합니다.

 

 

결과적으로

 

<h1>bskyvision</h1>

<h2>티스토리 블로그</h2>

 

이

 

<h1>naver</h1>

<h2>포털사이트</h2>

 

으로 바뀐 것입니다. 간단하죠?

 

관련 글

[jQuery] attr 메소드 사용법