공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

.html() - 일치요소 내부에 html 문자열 추가

serpiko 2013. 10. 13. 22:56

.html( htmlString )Returns : jQuery

개요 : 일치하는 요소 내부에 새로운 html 문자열을 추가한다.

  • .html( htmlString )
  • htmlString 새로 추가될 html 소스
  • .html( function(index, oldhtml) )
  • function(index, oldhtml) 이 함수는 새로 추가될 html을 반환합니다. 기존의 html을 인자로 받아서 index에 해당하는 위치에

자바스크립트의 innerHTML과 같은 함수이다. html() 함수는 XML문서에는 사용할 수 없다.

 

실무)

1
 
$("#footer_url").html(_xmlStrArr[_xmlActiveNum]);

 

 

예제)

div태그안에 html소스를 추가함.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
 
<!DOCTYPE html>
<html>
<head>
  <style>

  .red { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <span>Hello</span>
  <div></div>
  <div></div>
  <div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>

</body>
</html>

 

결과)

 

예제)

html()함수로 html을 추가한 뒤, append() 함수를 사용해 느낌표를 더 추가합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; font-size:18px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
<script>

    $("div").html("<b>Wow!</b> Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
              .css("color", "red");

</script>

</body>
</html>

 

결과)

 

html() 함수에는 원래 느낌표가 하나인데 append() 함수를 사용해서 빨간색 느낌표를 추가된 것을 보실수 있습니다.

 

출처 : http://www.jquery.com

저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

.show() - 요소보이기  (0) 2013.10.13
xml - 파싱2  (0) 2013.10.13
.eq(index)  (0) 2013.10.13
append() - 마지막 자식 요소 추가  (0) 2013.10.13
xml - 파싱1  (0) 2013.10.13
댓글