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





참고글
블로그 이미지

도로락

IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그

댓글을 달아 주세요! 질문 환영합니다!