html() 와 appendTo()로 추가했을때의 차이점
DOM 요소를 특정 위치에 추가할때 html() 메서드와 appendTo() 메서드의 차이점은 무엇일까요? html() 메서드는 innerHTML 에 값을 대입(set) 해준다는 점이고, appendTo() 메서드는 기존 값에 추가 해준다는 점 입니다. 다음과 같이 각각 메서드를 두 번씩 실행했을때의 차이점이 무엇일까요? 단 문서의 body 태그는 비어있는 상태입니다.


메서드 실행 전 body 요소의 상태
<body></body>                                                                            
cs


appendTo()를 두 번 실행했을 때
$('<span>domTest</span>').appendTo('body');                                                 
$('<span>domTest</span>').appendTo('body'); 
cs

html()를 두 번 실행했을 때
$('body').html('<span>domTest</span>');                                                     
$('body').html('<span>domTest</span>'); 
cs



먼저 appendTo() 를 두 번 실행했을 때입니다. 말 그대로 추가 되었습니다.
<body>                                                                                    
    <span>domTest</span>
    <span>domTest</span>
</body>
cs


그러나 html()은 매번 set 하는 형태이기때문에 덮어 씌워지는 차이점이 있습니다.
<body>                                                                                    
    <span>domTest</span>
</body>
 
cs


즉 결론은 html()을 매번 덮어쓰는 형태이다. appendTo() 는 메서드 이름과 같이 계속 요소를 추가하는 형태이다 라는 것입니다.
블로그 이미지

도로락

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

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