[제이쿼리/jQuery] append() , appendTo() 새로운 요소 삽입

append() , appendTo() 새로운 요소 삽입

---

appned() 와 appnedTo() 는 어느 특정 요소 하위로 새로운 요소를 삽입할때 사용한다. 특정 조건문일때만 나타나는 요소를 추가할때 등등 사용범위가 넓다. 

먼저 간단한 예제를 살펴보자

html

<div class="main">

위 div 안에 새로운 요소를 넣고 싶다면 아래와 같이 작성하면 된다.

JS

$( "<input>",{type:'text'}).appendTo( ".main" );

위의 예제는 <div class="main"> 태그 하위로 input 태그를 삽입하는 예제이다. 만약 appendTo 대신 append 를 사용하고자 한다면 아래와 같이 사용하면 된다.

JS

$( "<input>",{type:'text'}).appendTo( ".main" );

append() 와 appendTo 의 차이는 함수 인자로 target 이 들어갈지 아니면 추가할 요소가 들어갈지 의 차이뿐이니 쓰기 쉬운걸 사용하면 된다.

위의 예를보면 {type:'text'} 부분은 input 태그의 속성을 지정해준다. $( 요소 , { 속성 } ) 과 같이 입력하여 사용할수 있는데 속성은 자바스크립트 객체(Object) 형태로 입력 하여 사용한다. 또한 jQuery 의 강력한 기능인 메소드체인(Method Chaining) 을 이용하면 스타일과 같은 다양한 메소드를 사용하여 해당 객체의 속성을 설정할수 있도록 한다. 아래는 위보다 좀더 복잡한 예제를 사용해보았다.

$( "<img>",{
	src:"./images/Tulips.jpg",
	alt:"튤립",
	title:"Tulips",
	click:function(){
		alert($(this).attr('title'));
	}
})
.css({
	height:'400px',
	weight:'300px',
	border:'1px solid black'
	
})
.appendTo( ".main" );

위와 같이 사용하면 좀더 구체적인 설정이 담긴 요소를 Html 문서내에 동적으로 추가할 수 있다.