jQuery를 사용하여 HTML 요소를 만들 수있는 가장 효율적인 방법은 무엇입니까?

해결법

1.나는 $ (document.createElement ( 'DIV')를) 사용; 쇼를 벤치마킹이 기술은 가장 빠른 것입니다. 내가 jQuery를이 요소로 식별하고 요소 자체를 만들 필요가 없기 때문에 이것이 추측.

나는 $ (document.createElement ( 'DIV')를) 사용; 쇼를 벤치마킹이 기술은 가장 빠른 것입니다. 내가 jQuery를이 요소로 식별하고 요소 자체를 만들 필요가 없기 때문에 이것이 추측.

당신은 정말 다른 자바 스크립트 엔진을 벤치 마크를 실행하고 결과를 청중의 무게를해야한다. 거기에서 결정을합니다.

2.개인적으로 난 (가독성을 위해) 좋을 것 :

개인적으로 난 (가독성을 위해) 좋을 것 :

$('<div>');

제안에 대한 몇 가지 숫자까지 (사파리 3.2.1 / 맥 OS X) :

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms

3.이 jQuery를에 관하여 때문에 그때는이 (청소) 접근 방식을 (사용하는)를 사용하는 것이 좋습니다 생각

이 jQuery를에 관하여 때문에 그때는이 (청소) 접근 방식을 (사용하는)를 사용하는 것이 좋습니다 생각
```
$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');
```
데모.

이 방법은, 당신도 특정 요소와 같은 이벤트 핸들러를 사용할 수 있습니다
```
$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'<span>For HTML</span>',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');
```
데모.

그러나 동적 요소를 많이 다루고있는 때, 대신, 특정 요소에 이벤트 핸들러를 추가하지 않도록해야합니다, 당신은 같은 위임 된 이벤트 핸들러를 사용한다
```
$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('<div/>', {
        'class':'myClass',
        'html':'<span>Element'+i+'</span>'
    }).appendTo('body');
}
```
데모.

그래서, 당신은 작성하고 같은 클래스, 즉 (myClass가) 다음 적은 메모리가 이벤트 처리에 소요됩니다와 요소의 APPEND 수백 경우 하나의 핸들러는 모든 동적으로 삽입 된 요소에 대한 작업이 수행되기 때문에.

업데이트 : 우리는 동적 요소를 만들기 위해 다음과 같은 방법을 사용할 수 있기 때문에
```
$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");
```
그러나 크기 속성을 사용하여이 예에서 오래된 버그 리포트, 모양을 jQuery를-1.8.0 이상 여기에 사용하는이 방법이다 사용하여 설정할 수 없습니다 jQuery를-1.7.2 어떤 크기 속성이 예를 들어 위의 사용 30으로 설정되어 있는지 보여줍니다 하지만 우리는 여기에, jQuery를-1.8.3을 사용하여 크기 속성을 설정할 수 없습니다 동일한 방법을 사용하여 비 작업 바이올린입니다. 그래서, 크기 속성을 설정하기 위해, 우리는 다음과 같은 방법을 사용할 수 있습니다
```
$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");
```
또는이 하나
```
$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");
```
우리는 자식 개체로 ATTR / 소품 통과 할 수 있지만 jQuery를-1.8.0에서 작동 이상 버전이 예제를 확인하지만, jQuery를-1.7.2 또는 이전 버전에서 작동하지 않습니다 (모든 이전 버전에서 테스트하지).

BTW, jQuery를 버그 리포트에서 촬영

그들은 방법 다음 사용하는 것이 좋습니다 (이전 사람의 작품뿐만 아니라, 1.6.4에서 테스트)
```
$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");
```
그래서, IMO,이 방법을 사용하는 것이 좋습니다. 이 업데이트는 내가 읽은 후 /이 대답을 발견하고이 응답 쇼에서 이루어집니다 당신은 심지어 버전 2.0.2에서 '크기'다음 대신 '크기'의 (자본 S) 그 것이다 단지 잘 작동을 사용하는 경우
```
$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');
```
또한 차이가 있기 때문에, 속성 대 속성, 소품에 대해 읽어,이 버전을 통해 다릅니다.
4.당신이 $을하고 있다면 사실, ( '
'), jQuery를도 document.createElement를 사용합니다 ().

당신이 $을하고 있다면 사실, ( '
'), jQuery를도 document.createElement를 사용합니다 ().

(그냥 라인 (117)을 살펴).

일반 DOM으로 되돌리려면 많은 이유가 아닌,이 몇 가지 함수 호출 오버 헤드가 있지만, 성능이 중요한 경우를 제외하고 (당신은 요소의 수백 [천]를 만드는).

그냥 아마 케이스를 새로운 웹 페이지 요소입니다 생성하는 가장 스틱 일을 JQuery와 방법에 거한다.
5.당신이 HTML 콘텐츠 (이상 단지 하나의 DIV)을 많이 가지고 있다면, 당신은 다음, 숨겨진 용기 내 페이지에 HTML을 구축을 업데이트하고 필요한 경우에는 표시하는 것이 좋습니다. 이 방법은, 마크 업의 큰 부분은 브라우저에 의해 사전 구문 분석 할 수 있으며 호출시 피하기는 자바 스크립트에 의해 수렁에 빠져 점점. 도움이 되었기를 바랍니다!

당신이 HTML 콘텐츠 (이상 단지 하나의 DIV)을 많이 가지고 있다면, 당신은 다음, 숨겨진 용기 내 페이지에 HTML을 구축을 업데이트하고 필요한 경우에는 표시하는 것이 좋습니다. 이 방법은, 마크 업의 큰 부분은 브라우저에 의해 사전 구문 분석 할 수 있으며 호출시 피하기는 자바 스크립트에 의해 수렁에 빠져 점점. 도움이 되었기를 바랍니다!
6.이 질문에 대한 정답은 아니지만 여전히 나는이 공유하고 싶습니다 ...

이 질문에 대한 정답은 아니지만 여전히 나는이 공유하고 싶습니다 ...

당신이 DOM에 비행과 APPEND에 대한 요소를 많이 만들하고자 할 때 단지 document.createElement ( 'DIV')를 사용하고 JQuery와 생략하면 성능이 많이 향상됩니다.
7.나는 당신이 그것을 최적화 할 수 있지만 당신이 최선의 방법을 사용하고 생각 :

나는 당신이 그것을 최적화 할 수 있지만 당신이 최선의 방법을 사용하고 생각 :
```
 $("<div/>");
```
8.당신은 당신이 CPU의 관점에서 매우 자주 실행할 동작에서 원시 성능이 필요하지 않습니다.

당신은 당신이 CPU의 관점에서 매우 자주 실행할 동작에서 원시 성능이 필요하지 않습니다.
9.당신은 요소 생성 성능의 중요성은 처음에 jQuery를 사용의 맥락에서 관련성이없는 것을 이해해야합니다.

당신은 요소 생성 성능의 중요성은 처음에 jQuery를 사용의 맥락에서 관련성이없는 것을 이해해야합니다.

명심하십시오, 당신은 실제로 그것을 사용하려고하지 않는 한 요소를 만드는 진짜 목적이 없다.

당신은 $와 같은 성능 테스트 뭔가 (document.createElement ( 'DIV')) 대 $ ( '
')로 유혹하고 $를 사용하는 큰 성능 향상을 얻을 수 (document.createElement ( 'DIV'))하지만 할 수의 아직 DOM에없는 그냥 요소입니다.

실제 테스트 f.ex. 포함해야하므로 그러나 하루의 끝에서, 당신은 어쨌든 요소를 사용하는 것이 좋습니다 .appendTo ();

당신이 서로에 대해 다음을 테스트 할 경우의가 보자 :
```
var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');
```
당신은 결과가 달라집니다 알 수 있습니다. 때로는 하나의 방법은 더 나은 다른보다 수행하고 있습니다. 그리고이 경우에만 시간에 컴퓨터 변화에 백그라운드 작업의 양 때문이다.

여기에 자신을 테스트

그래서, 하루의 끝에서, 당신은 요소를 생성하는 가장 작고 읽을 수있는 방법을 선택하고 싶어. 그 방법은, 적어도, 스크립트 파일은 작은 가능합니다. 아마 당신은 DOM에서 사용하기 전에 요소를 생성하는 방법보다 성능 점에 더 중요한 요소.
10.누군가가 이미 벤치 마크를했다 : jQuery를 document.createElement 동등한?

누군가가 이미 벤치 마크를했다 : jQuery를 document.createElement 동등한?

$ (document.createElement ( 'DIV')는) 큰 우승자이다.
11.한 점은 이렇게 쉽게 할 수 있다는 것입니다 :

한 점은 이렇게 쉽게 할 수 있다는 것입니다 :
```
$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")
```
그런 다음 JQuery와 전화로이 모든 것을 할 수 있습니다.
12.나는 jquery.min의 v2.0.3을 사용하고 있습니다. 그것은 사용 다음에 더 나은 나를 위해입니다 :

나는 jquery.min의 v2.0.3을 사용하고 있습니다. 그것은 사용 다음에 더 나은 나를 위해입니다 :
```
var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);
```
다음과 같이 :
```
var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);
```
첫번째 코드 처리 시간을 제 2 부호에 비해 훨씬 낮다.

from https://stackoverflow.com/questions/327047/what-is-the-most-efficient-way-to-create-html-elements-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 는 DOM 요소가 제거 된 경우, 그 청취자는 메모리에서 제거된다? (0)	2020.09.29
[JQUERY] jQuery를 선택기에서 와일드 카드 (0)	2020.09.29
[JQUERY] JSON 값을 반환 실행 (0)	2020.09.29
[JQUERY] 이유는 jQuery를위한 구글의 CDN을 사용해야합니까? (0)	2020.09.29
[JQUERY] JQuery와 아약스 웹 서비스에 JSON을 게시 (0)	2020.09.29

복붙노트

[JQUERY] jQuery를 사용하여 HTML 요소를 만들 수있는 가장 효율적인 방법은 무엇입니까?

jQuery를 사용하여 HTML 요소를 만들 수있는 가장 효율적인 방법은 무엇입니까?

해결법

1.나는 $ (document.createElement ( 'DIV')를) 사용; 쇼를 벤치마킹이 기술은 가장 빠른 것입니다. 내가 jQuery를이 요소로 식별하고 요소 자체를 만들 필요가 없기 때문에 이것이 추측.

2.개인적으로 난 (가독성을 위해) 좋을 것 :

3.이 jQuery를에 관하여 때문에 그때는이 (청소) 접근 방식을 (사용하는)를 사용하는 것이 좋습니다 생각

4.당신이 $을하고 있다면 사실, ( '
'), jQuery를도 document.createElement를 사용합니다 ().

6.이 질문에 대한 정답은 아니지만 여전히 나는이 공유하고 싶습니다 ...

7.나는 당신이 그것을 최적화 할 수 있지만 당신이 최선의 방법을 사용하고 생각 :

8.당신은 당신이 CPU의 관점에서 매우 자주 실행할 동작에서 원시 성능이 필요하지 않습니다.

9.당신은 요소 생성 성능의 중요성은 처음에 jQuery를 사용의 맥락에서 관련성이없는 것을 이해해야합니다.

10.누군가가 이미 벤치 마크를했다 : jQuery를 document.createElement 동등한?

11.한 점은 이렇게 쉽게 할 수 있다는 것입니다 :

12.나는 jquery.min의 v2.0.3을 사용하고 있습니다. 그것은 사용 다음에 더 나은 나를 위해입니다 :

'JQUERY' 카테고리의 다른 글

티스토리툴바

jQuery를 사용하여 HTML 요소를 만들 수있는 가장 효율적인 방법은 무엇입니까?

해결법

1.나는 $ (document.createElement ( 'DIV')를) 사용; 쇼를 벤치마킹이 기술은 가장 빠른 것입니다. 내가 jQuery를이 요소로 식별하고 요소 자체를 만들 필요가 없기 때문에 이것이 추측.

2.개인적으로 난 (가독성을 위해) 좋을 것 :

3.이 jQuery를에 관하여 때문에 그때는이 (청소) 접근 방식을 (사용하는)를 사용하는 것이 좋습니다 생각

4.당신이 $을하고 있다면 사실, ( ''), jQuery를도 document.createElement를 사용합니다 ().

6.이 질문에 대한 정답은 아니지만 여전히 나는이 공유하고 싶습니다 ...

7.나는 당신이 그것을 최적화 할 수 있지만 당신이 최선의 방법을 사용하고 생각 :

8.당신은 당신이 CPU의 관점에서 매우 자주 실행할 동작에서 원시 성능이 필요하지 않습니다.

9.당신은 요소 생성 성능의 중요성은 처음에 jQuery를 사용의 맥락에서 관련성이없는 것을 이해해야합니다.

10.누군가가 이미 벤치 마크를했다 : jQuery를 document.createElement 동등한?

11.한 점은 이렇게 쉽게 할 수 있다는 것입니다 :

12.나는 jquery.min의 v2.0.3을 사용하고 있습니다. 그것은 사용 다음에 더 나은 나를 위해입니다 :

'JQUERY' 카테고리의 다른 글

티스토리툴바

4.당신이 $을하고 있다면 사실, ( '
'), jQuery를도 document.createElement를 사용합니다 ().