다양한 방법

Question

전통적으로 필자과 같이 페이지에 HTML 콘텐츠를 추가하고 : 최근

var text='Some text'; 
var num=0; 
$('#div').append('<div id="a'+num+'">'+text+'</div>'); 

그러나 필자는 다른 사람의 코드에서이 방법을 많이 알아 차리지되었다 :

var text='Some text'; 
var num=0; 
var newElement=$('<div></div>').text(text).prop('id','a'+num); 
$('#div').append(newElement); 

을

다른 사람이 두 번째 접근법의 장점을 설명하고 내가이 접근법으로 넘어 가야하는지, 아니면 늘 계속 있었던 것처럼 계속 추가해야하는지 여부를 설명 할 수 있습니까?

Answer 1

은 첫 번째, 두 번째보다 훨씬 빠릅니다 문자열 연결 ..

jsperf test 또한 첫 번째 방법은 갈 길이라는 것을 증명합니다. 두 번째 것은 더 읽기 쉽지만 첫 번째는 더 빠릅니다. 당신은 당신이 원하는 것을 선택합니다.

_{내 랩톱에서 두 번째 방법은 첫 번째 방법보다 19 % 느립니다.}

Answer 2

추가 할 DOM 요소를 변경할 필요가없는 경우 첫 번째 방법을 사용하십시오.

두 번째 방법은 jQuery 선택기를 작성하기 때문에 비용이 많이 든다. 이는 생성하려는 요소를 애니메이션, 페이드 또는 추가로 처리하고 해당 요소에 대한 참조가 필요한 경우에만 유용합니다. 그냥 몇 가지 문자열을 concating 두 번째, 당신은보다 살인을 통해 조금이다 .text() 및 .prop()을 수행하는 동안 직접 HTML

를 추가 주로하기 때문에