[jQuery] append() 와 html() 의 성능비교 차이

1. html()

.html()은 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾼다.

.text()와 비슷하지만 태그의 처리가 다르다.

기존의 내용을 초기화시켜주고 새로운내용이 들어간다.

var html = $("#html").html("<h1>hello world</h1>");

 

2.append()

.append()는 선택한 요소의 내용의 끝에 콘텐트를 추가한다. 기존데이터에 내용이 추가된다고 생각하면쉽다.

기존의 내용을 초기화하려면 empty() 또는 remove()를 사용해야된다.

<div>hello</div>

요기서

$('div').append(' world');

라고 append 함수를 사용하게되면

<div>hello world</div>

라고 뒤에 코드가 붙게된다.

 

 

3. html() 과 append() 의 성능차이

솔직히 한번도 성능에대해서 고민해본적은없지만, 다른 개발자들의 의견에따르면 append()가 속도면에서 더욱 빠르다고한다.

 

하지만, 새로데이터를 가져올때마다 초기화시켜줘야하는 번거로움이 있다.

 

많은양의 데이터를 사용하지않는 프로젝트에 사용되는것이라면 아무거나사용해도 상관없을것같다. 하지만 이런고민을 자꾸해주는건 좋다생각한다.