[Jquery] append(), appendto()


안녕하세요. 명월입니다.

 

웹 개발을 하다 보면 웹페이지를 동적으로 만들어야 할 경우가 많이 있습니다. 동적으로 만드는 것중에 하나가 Ajax도 있지만 그런것보다 TextBox를 추가한다던지 버튼을 눌렀을 경우 웹페이지의 형태(DOM)을 바꾸어야 할 때가 간혹 있습니다.

그럴 때 사용하는 함수 append(), appendto() 함수를 소개합니다.

append 는 지정한 id 요소에 내용을 추가하는 기능을 가지고 있습니다. Javascript 로 비교 하자면 innerHTML과 비슷한 기능을 수행한다고 생각하시면 쉽습니다.

 사용법 : $(클래스명).append(추가할 내용);
         $(추가할내용).appendTo(클래스명);

예제로 설명하겠습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE> New Document </TITLE>
    <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
      function appendex(){
        $("#test").append("<p><span>Append Test입니다.</span></p>");
      }
      function appendtoex(){
        $("<p><span>AppendTo Test입니다.</span></p>").appendTo("#test");
      }
    </script>
  </HEAD>
  <BODY>
    <p>
      <div id="button_div">
        <input type="button" value="Append 클릭" onclick="appendex()">
      </div>
    </p>
    <p>
      <div id="button_div">
        <input type="button" value="AppendTo 클릭" onclick="appendtoex()">
      </div>
    </p>
    <div id="test"></div>
  </BODY>
</HTML>

결과 화면 입니다.

Append.html