html() 와 appendTo()로 추가했을때의 차iv점

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

메서드 실행 전 body 요소의 상태

<body></body>

appendTo()를 두 번 실행했을 때

$('<span>domTest</span>').appendTo('body');
$('<span>domTest</span>').appendTo('body');

html()를 두 번 실행했을 때

$('body').html('<span>domTest</span>');
$('body').html('<span>domTest</span>');

먼저 appendTo() 를 두 번 실행했을 때입니다. 말 그대로 추가 되었습니다.

<body>
    <span>domTest</span>
    <span>domTest</span>
</body>

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

<body>
    <span>domTest</span>
</body>

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

저작자표시 비영리 변경금지 (새창열림)

'JavaScript' 카테고리의 다른 글

[jQuery] data-xx 속성을 추가해주는 data()함수에 대해 (0)	2018.12.17
[jQuery] DOM 생성 및 추가하기 (0)	2018.07.03
[jQuery] jQuery 필터 메서드 사용법 (0)	2018.07.01
[Underscore.js] 언더스코어 JS 템플릿 엔진 사용하기 (0)	2018.06.27
[jQuery] DOM 요소 제거하기 - remove(), empty() 메서드 (0)	2018.06.27

도로락

[jQuery] html() 와 appendTo()로 추가했을때의 차이점