bskyvision RSS 태그 관리 글쓰기 방명록 kyohoonsim@gmail.com
2020-12-11 09:16:42

jquery의 html 메서드로는 크게 두가지 일을 할 수 있습니다.

 

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

 

1
2
3
4
5
6
7
8
9
10
11
12
<div id="title">
    <h1>bskyvision</h1>
    <h2>티스토리 블로그</h2>
</div>
 
<p>안녕하세요. bskyvision입니다.</p>
 
 
<script>
    var title = $('#title').html();
    alert(title);
</script>
cs

 

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

 

 

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

 

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="title">
    <h1>bskyvision</h1>
    <h2>티스토리 블로그</h2>
</div>
 
<p>안녕하세요. bskyvision입니다.</p>
 
 
<script>
    $('#title').click(function(){
        $('#title').html('<h1>naver</h1><h2>포털사이트</h2>');
    });
</script>
cs

 

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

 

결과적으로

 

<h1>bskyvision</h1>

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

 

 

<h1>naver</h1>

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

 

으로 바뀐 것입니다. 

728x90



이 페이지는 리디주식회사에서 제공한
리디바탕 글꼴이 사용되어 있습니다.