jQuery의 DOM 요소 생성 차이점

jQuery를 사용하여 DOM 요소를 만들 때 성능에 차이가 있는지 (또는 모범 사례가 무엇인지) 궁금합니다. 문자열jQuery의 DOM 요소 생성 차이점

$('<a href="http://www.example.com" class="footerLink" rel="external">example</a>');`

는, 첫 번째 요소를 생성 후 속성을 추가 :

$('<a></a>') 
    .addClass('footerLink') 
    .attr({ 
    rel: 'external, 
    href: 'http://www.example.com' 
    }) 
    .text('example');

작성이 작업을 수행하는 3 가지 방법이 있습니다 내 knowlegde으로

요소와 그것을 가진 속성 객체 전달 :
```
$('<a></a>', { 
    'class': 'footerLink', 
    href: 'http://www.example.com', 
    rel: 'external' 
}) 
.text('example'); 
```

편집 : 당신이 요소에 많은 항목을 추가하는 경우? 당신은 처음으로 매우 길게 string을 만들어야하고 루프 후에 그것을 추가해야합니까?

출처

2012-10-11 Willem de Wit

'.text ("example")'i가 없습니다. n 2와 3. asidem 왜 http://jsperf.com/을 방문하고 직접 보지 않습니까? –

다음을 확인하십시오 : http://jsperf.com/jquery-add-element - 가장 빠른 방법은 첫 번째 것 같습니다 ... – techfoobar

첫 번째 옵션이 가장 좋습니다 ... –

당신이 문자열로 연결 한 후 html()으로 문서에 첨부 할 전체 DOM 생성 될위한 가장 빠른 방법 : 당신이 당신의 예를 가장 빠른에서이 세 가지의

var dom = '<a href="http://www.example.com" class="footerLink" rel="external">example</a>'; 
$(element).html(dom);

을 복잡한 문자열 파싱을 할 필요가 없으며 속성이 체인화 된 함수 호출을 사용하지 않고 단일 객체로 선택기에 대한 매개 변수로 제공되기 때문에 세 번째 매개 변수 여야합니다.

There is a forum thread on jQuery you may want to check out.

업데이트 : 당신이 요소에 항목을 많이 만드는 경우

, 당신은 확실히 문자열 접근 방식을 취해야한다. 1000 개의 목록 요소를 만드는 다음 예제를 살펴보십시오.

// Assume we have data defined with 1000 data members 
// each containing a text property 
var list = []; 
for (var i = 0; i < data.length; i++) { 
    list.push('<li>' + data.text + '</li>'); 
} 
$(ul).html(list.join(''));

출처

2012-10-11 08:36:31

기사를 공유해 주셔서 감사합니다! 따라서 innerHtml을 변경하기 위해 문자열을 전달하여 DOM 요소를 만드는 것이 최고의 성능을 발휘합니다. 그러나 나는 마크 업을 좋아하지 않으며, 코드를 읽기 쉽게 만든다. 어떻게 생각해? –

@WillemdeWit 네, 맞습니다. 읽기 쉽지 않지만 성능이 뛰어납니다. –

jQuery tmpl과 같은 템플릿 플러그인을 사용해야 할 수도 있습니다. 어쩌면 성능과 멋진 마크 업 모두를 가질 수 있습니다. –

콘스탄틴 (Konstantin)에 의해 설명 되었 듯이, 스트링 접근법은 성능면에서 더 우수합니다. 그러나 코드를 작성할 때 DOM 문자열이 알려지지 않은 경우 (예 : 텍스트가 사용자 입력에서 나옴) 더 느린 접근은 다음과 같이 의미가 있습니다.

문자열 연결로 긴 시리즈
주고의 jQuery의 "text" 방법 결국

을하고 출력하기 전에 문자열을 살균 할 수있는 기회,이 정말

(... 수염 또는 다른 사람)를 템플릿 프레임 워크 일 수 있습니다

출처

2012-10-11 09:13:47 phtrivier

jQuery의 DOM 요소 생성 차이점

답변

관련 문제