안녕하세요. 명월입니다.
웹 개발을 하다 보면 웹페이지를 동적으로 만들어야 할 경우가 많이 있습니다. 동적으로 만드는 것중에 하나가 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'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글
| [Javascript] 소스 보기 라이브러리 - Syntaxhighlighter (0) | 2013.03.12 |
|---|---|
| [Jquery] 스크롤링 효과 예제 (0) | 2012.10.06 |
| [Jquery] 롤링 라이브러리 - jcarousellite (0) | 2012.09.24 |
| [Jquery] Html에서 나타내는 Treeview (0) | 2012.09.22 |
| [Jquery] 슬라이드 메뉴 (8) | 2012.09.19 |
| [Jquery] Ajax xml 파싱 (0) | 2012.09.13 |
| [Jquery] 소스보기, 새로고침, 드래기 막기 소스 (0) | 2012.09.08 |
| [Jquery] Ajax 관련 이벤트 (0) | 2012.09.07 |