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() 는 메서드 이름과 같이 계속 요소를 추가하는 형태이다 라는 것입니다.
'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 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그