엘리먼트를 제어하는 법

엘리먼트 제어 

 jQuery는 엘리먼트를 제어하는 풍부한 기능을을 제공합니다.  여기서 엘리먼트를 제어한다는 말의 의미는 html로 구성이 되어 있는 정적인 테그에 꼭 html 테그를 통해서만 새로운 테그를 만든다거나 삭제를 하거나 치환할 필요없이 jQuery 를 통해 테그를 script코드로 제어하는 것을 의미하게 됩니다 . 

http://api.jquery.com/category/manipulation/

 

엘리먼트 제어 예제

예를 들어 after를 사용해 특정 엘리먼트 뒤에 내용 삽입을 가능하게 할 수 있습니다.

<h1>첫번째 줄입니다</h1>
    <script type="text/javascript">
	$("h1").after("<h2>두번째 줄입니다</h2>");
	
	</script>

 위와 같이 after라는 엘리먼트 제어를 통해 새로운 테그를 삽입 했습니다.

하나만 더 예시를 들어 버튼을 클릭했을 때 버튼이 사라지는 로직을 구현해보겠습니다. 

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>	
	<h1>첫번째 줄입니다</h1>

	<button id="button_remove">
      remove
	</button>
    <script type="text/javascript">
	$("h1").after("<h2>두번째 줄입니다</h2>");
	$("#button_remove").click(function(event) {
		$("#button_remove").remove();
	});
	</script>

 

 

위와 같이 코드를 작성하면 버튼이 생성된것을 클릭하는 event가 발생할 때 버튼이 삭제 되는 것을 볼 수 있다 이렇게 여러가지 방법을 통해 엘리먼트 제어가 가능합니다.