정리jQuery

jQuery API 살펴보기 html 메서드

html, jQuery

기존의 자바스크립트에서의 문서 객체의 innerHTML 속성과 관련된 jQuery 메서드이다.

jQuery의 text() 메서드와 헷갈릴 수 있는데 차이점은 html() 메서드는 HTML 태그를 인식 하는 점에서 차이가 있다.

html() 메서드는 일치하는 요소 집합의 첫 번째 요소에 대한 HTML 내용을 가져온다.

선택된 요소의 매치가 여러 개가 있을 때는 제일 첫 번째에 해당하는 요소가 선택되어서 반환된다.

사용법

메소드 형태

1
2
$('selector').html(value);
$('selector').html(function(index, html){});

이 메소드는 XML 문서에서는 사용할 수 없다.

1
2
3
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

위와 같은 HTML이 있을 때 아래와 같은 html() 메서드를 사용하면

1
$("div.demo-container").html();

결과는 아래와 같이 반환된다.

1
<div class="demo-box">Demonstration Box</div>

예제

html 메서드는 매개변수로 입력하고자 하는 HTML 문자열을 입력한다.

중요한건 html() 메서드는 HTML 태그를 인식하여 문자열을 삽입한다.

해당 결과를 보면 h1 태그를 인식한 결과가 나온다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
</head>
<body>

<div></div>
<div></div>
<div></div>

<script>
$( "div" ).html( "<h1>$().html() Method</h1>" );
</script>

</body>
</html>

함수를 매개변수로 입력하는 html() 메서드

div의 개수 만큼 header 옆의 인덱스 숫자가 증가하는 것을 볼 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
</head>
<body>

<div></div>
<div></div>
<div></div>

<script>
$( "div" ).html(function(index){
	return '<h1>Header-'+index+'</h1>';
});
</script>

</body>
</html>
Share