jQuery DOM 생성 및 추가하기
jQuery는 매우 간단하게 DOM 객체를 생성할 수 있으며, 원하는 위치에 생성한 DOM 요소를 추가할 수 있도록 다양한 메서드를 지원하고 있습니다.
DOM 객체 생성하기
jQuery에서는 $(DOM 문자열) 형식만으로도 DOM 객체를 생성할 수 있습니다.
|
$('<span>domTest</span>'); |
cs |
추가적인 별다른 조작 없이 DOM 객체가 생성됩니다. 다만 생성한 DOM 객체를 문서 요소들 사이에 끼워넣지 않은 상태입니다. 제대로 생성되었는지 콘솔에 찍어 확인해봅니다.
|
<script>
$(document).ready(function () {
var span = $('<span>domTest</span>');
console.log('----------dom 객체----------------');
console.log(span);
console.log('----------dom text---------------');
console.log(span.text());
});
</script> |
cs |
DOM 객체가 생성되었고 이미 문서에 생성되어 있는 DOM 객체와 다름없이 text() 메서드 또한 사용 가능한것을 볼 수 있습니다.
DOM객체 원하는 위치에 추가하기
DOM 객체를 생성한 후에는 원하는 위치에 추가해주어 사용자 입장에서는 동적으로 화면이 바뀌는듯한 효과를 갖게 할 수 있습니다. 다음의 메서드들은 jQuery에서 지원하는 DOM 요소 추가 메서드들입니다.
메서드 설명을 보면 차이점이 없고 헷갈릴 수 있는데, 실제 결과는 서로 차이가 없지만 메서드의 호출 기준이 추가할 요소이냐, 추가할 위치이냐의 차이점만 있을 뿐입니다.
| 메서드명 |
설명 |
|
$(추가할 요소).appendTo(추가할 위치) |
요소를 추가할 위치 뒤에 추가합니다. |
|
$(추가할 위치).append(추가할 요소) |
요소를 추가할 위치 뒤에 추가합니다. |
|
$(추가할 요소).prependTo(추가할 위치) |
요소를 추가할 위치 앞에 추가합니다. |
|
$(추가할 위치).prepend(추가할 요소) |
요소를 추가할 위치 앞에 추가합니다. |
|
$(추가할 요소).insertAfter(추가할 위치) |
요소를 추가할 위치 뒤에 추가합니다. |
|
$(추가할 위치).after(추가할 요소) |
요소를 추가할 위치 뒤에 추가합니다. |
|
$(추가할 요소).insertBefore(추가할 위치) |
요소를 추가할 위치 앞에 추가합니다. |
|
$(추가할 위치).before(추가할 요소) |
요소를 추가할 위치 앞에 추가합니다. |
사용 예시
각 유형별로 한가지씩만 사용 예시를 보도록 하겠습니다. 동작 형식은 같으므로 추가 위치에 대한 부분만 유심히 봐주시기 바랍니다.
최초 body 태그입니다.
|
<body>
<span>기준!!</span>
</body> |
cs |
appendTo() 사용법입니다.
|
<script>
$(document).ready(function () {
$('<span>appendTo</span>').appendTo('body');
});
</script> |
cs |
기존에 body 에는 기준!! span이 존재했는데, 그 뒤에 추가되었습니다.
$('body').append('<span>append</span>') 로 사용해도 결과는 같습니다.
|
<body>
<span>기준!!</span>
<span>append</span>
</body> |
cs |
prependTo() 사용법입니다.
|
<script>
$(document).ready(function () {
$('<span>prependTo</span>').prependTo('body');
});
</script> |
cs |
기존에 body 에는 기준!! span이 존재했는데, 그 이전 위치에 추가되었습니다.
$('body').prepend('<span>prepend</span>') 로 사용해도 결과는 같습니다.
|
<body>
<span>appendTo</span>
<span>기준!!</span>
</body> |
cs |
메서드 체이닝을 이용한 DOM 추가 활용
위의 예제에서 DOM을 생성하자마자 text() 메서드를 사용했는데요. 이와 같이 생성 직후에 DOM을 조작하고 곧바로 특정 위치에 요소를 추가할 수 있습니다.
|
<script>
$(document).ready(function () {
$('<span></span>').text('이것은 추가될 span').appendTo('body');
});
</script> |
cs |
기존에 body에는 기준!! span만 존재했는데, 메서드 체이닝을 이용하여 손쉽게 DOM을 생성하면서 그와 동시에 body요소에 추가한 모습입니다.
|
<body>
<span>기준!!</span>
<span>이것은 추가될 span</span>
</body> |
cs |
참고글
'JavaScript' 카테고리의 다른 글
| [JavaScript] JavaScript란? 자바스크립트 언어 설명 및 탄생배경 및 특징 (0) | 2019.06.03 |
|---|---|
| [jQuery] data-xx 속성을 추가해주는 data()함수에 대해 (0) | 2018.12.17 |
| [jQuery] html() 와 appendTo()로 추가했을때의 차이점 (0) | 2018.07.02 |
| [jQuery] jQuery 필터 메서드 사용법 (0) | 2018.07.01 |
| [Underscore.js] 언더스코어 JS 템플릿 엔진 사용하기 (0) | 2018.06.27 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그