[Jquery] append(), appendto()

개발 노트/JQuery  2012.09.09 21:25



 

안녕하세요 개발자 명월입니다.

 

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

 

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

 

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

 

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

             $(추가할내용).appendTo(클래스명);

 

예제로 설명하 겠습니다.

 

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2 <HTML>
  3 <HEAD>
  4 <TITLE> New Document </TITLE>
  5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6 <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7 <script>
  8 function appendex(){
  9 $("#test").append("<p><span>Append Test입니다.</span></p>");
10 }
11 function appendtoex(){
12 $(
"<p><span>AppendTo Test입니다.</span></p>").appendTo("#test");
13 }
14 </script>
15 </HEAD>
16 <BODY>
17 <p><div id="button_div"><input type="button" value="Append 클릭" onclick="appendex()"></div></p>
18 <p><div id="button_div"><input type="button" value="AppendTo 클릭" onclick="appendtoex()"></div></p>
19 <div id="test"></div>
20 </BODY>
21 </HTML>
22

 

 

결과 화면 입니다.

 

 

예제 소스 첨부하니 확인하시고 유용하게 쓰기 바랍니다.

 

Append.html

 


댓글 0개가 달렸습니다.
댓글쓰기