jQuery 강좌 | Methods > .html()

.html()은 선택한 요소 안의 내용을 담거나, 다른 내용으로 바꿉니다.

문법

HTML 태그를 포함하여 선택한 요소 안의 내용을 담으려면 다음과 같이 합니다.

.html()

이전 내용을 지우고 새로운 내용을 넣으려면 다음과 같이 합니다.

.html( htmlString )

예제 1

http://book.cmsfactory.net/jQuery/V01/Methods/html-01.html

div 태그 안의 내용을 저장하고 그 내용을 출력하는 예제입니다. div 태그가 여러개 있으면 첫번째 태그의 내용을 저장합니다. h1 태그까지 함께 저장한다는 것에 주의합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Methods | .html()</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $(document).ready(function() {
        var myString = $("div").html();
        alert( myString );
      });
    </script>
  </head>
  <body>
    <div>
      <h1>Lorem ipsum dolor.</h1>
    </div>
    <div>
      <h1>Aenean nec mollis.</h1>
    </div>
  </body>
</html>

예제 2

http://book.cmsfactory.net/jQuery/V01/Methods/html-02.html

div 태그 안의 내용을 지우고 새로운 내용을 넣는 예제입니다. div 태그가 여러개 있으면 모든 태그에 적용됩니다. <p>와 </p>를 태그로 인식하는 것에 주의합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Methods | .html()</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $(document).ready(function() {
        var myString = $("div").html("<p>Aenean nec mollis.</p>");
      });
    </script>
  </head>
  <body>
    <div>
      <h1>Lorem ipsum dolor.</h1>
    </div>
    <div>
      <h1>Phasellus lacinia tempus.</h1>
    </div>
  </body>
</html>

Category

Created on 2014-01-13 13:40 | Updated on 2015-07-17 01:12

이 글을 공유하기

Kakao