Javascript & JQuery & CSS

웹페이지를 개발하다 보면 동적인 페이지를 만들어야 될 때가 있습니다.

여기서 동적 생성은 Java Script로 실행했을 때 스크립트가 동작하면서 HTML코드를 작성해 주는 것을 말하며, 이와 반대로 정적 생성은 HTML문서를 직접 작성하는 것을 말합니다.

동적인 페이지를 작성할때 사용하는 것이 append() 메서드나 appendTo() 메서드 입니다.

사용방법은

$("클래스명").append("추가할내용");
-  클래스명 뒤에 추가할 내용을 삽입한다.

$("추가할내용").appendTo("클래스명");
- 추가할 내용을 클래스명 뒤에 삽입한다.


두 메서드의 예제를 보도록 하겠습니다.
 

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<ol>
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
</ol>

<button id="btn1">Append() text</button>
<button id="btn2">Append() list item</button>
<button id="btn3">appendTo() </button>


<script type="text/javascript">
$(document).ready(function() {
	$("#btn1").click(function(){        
		$("p").append(" <b>Appended text</b>.");
	});

	$("#btn2").click(function() {
		$("ol").append("<li>Appended item</li>");
	});

	$("#btn3").click(function(){
		$("<span>Hello World!</span>").appendTo("p");
	});

});

</script>

어렵지 않은 예제 입니다....

간단한 예제를 하나더 보도록 하겠습니다.
 

			<div class="container">
				<div class="hello">Hello</div>
				<div class="goodbye">Goodbye</div>
			</div>

위와 같은 HTML 태그가 존재할 때 아래 처럼 appendTo를 사용하게 되면 어떻게 될까요?
 

$('.hello').appendTo('.goodbye');

DOM 구조는 아래처럼 바뀌게 됩니다.
 

			<div class="container">
			  <div class="goodbye">
				Goodbye
				<div class="hello">Hello</div>
			  </div>
			</div>

 .append() 함수는 원본에서 새로운 위치로 이동이 됩니다.