[javascript] jQuery를 사용하여 HTML 요소를 작성하는 가장 효율적인 방법은 무엇입니까?

질문:

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

대답:

그때 쯤에 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');

데모.

그러나 많은 동적 요소를 처리하는 경우 handlers특정 요소에 이벤트 를 추가하지 말고 대신 위임 된 이벤트 핸들러를 사용해야합니다.

$(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))로 수백 개의 요소를 생성하고 추가 하면 동적으로 삽입 된 모든 요소에 대해 하나의 핸들러 만 있으면 이벤트 처리에 더 적은 메모리가 사용됩니다.

업데이트 : 다음과 같은 접근 방식을 사용하여 동적 요소를 만들 수 있기 때문에

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

그러나 size속성을 사용하여이 방법을 사용하여 설정할 수 없습니다 jQuery-1.8.0여기에 오래된 또는 이상 및 버그 보고서 에서, 모습 이 예를 사용하는 jQuery-1.7.2것을 보여주는 size속성이 설정되어 30예를 들어 위의 사용하지만 우리는 세트와 동일한 접근 방식을 수 없습니다 사용 size하여 속성을 jQuery-1.8.3여기에, A는 작동하지 않는 바이올린 . 따라서 size속성 을 설정하기 위해 다음 접근법을 사용할 수 있습니다

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

아니면 이거

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

우리는 통과 할 수 attr/prop자식 개체로하지만 작동 jQuery-1.8.0 and later버전 확인 이 예제를 하지만 그것은 작동하지 않습니다 에서 jQuery-1.7.2 or earlier(모든 이전 버전에서 테스트하지).

jQuery버그 보고서 에서 가져온 BTW

몇 가지 솔루션이 있습니다. 첫 번째는 공간을 절약하지 않고 코드의 선명도를 향상시키기 때문에 전혀 사용하지 않는 것입니다.

그들은 다음과 같은 접근 방식을 사용하는 것이 좋습니다 ( 이전의 방법 에서도 작동하며에서 테스트 됨 1.6.4)

$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

따라서이 접근법 인 IMO를 사용하는 것이 좋습니다. 이 업데이트는 내가 읽은 후 / 발견되어 이 답변 이 대답 쇼에서 당신이 사용하는 경우 'Size'(capital S)대신 'size'다음 것이다 단지 잘 작동 , 심지어에서version-2.0.2

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

또한 차이가 있기 때문에 prop 에 대해 읽어보십시오 Attributes vs. Properties. 버전에 따라 다릅니다.

답변

 $("<div/>");