jQuery를 사용하여 DOM에 HTML을 삽입하는 가장 좋은 방법은 무엇입니까?

Question

나는 사용자가 하루를 클릭 할 수있는 달력 페이지에서 일하고 있으며, 그 날의 양식을 팝업으로 입력한다.

jQuery를 사용하여 DOM을 조작하는 것이 낯선 사람은 아니지만 이전에 해본 적이있는 것입니다. 더 효율적인 방법이 있는지 궁금해하고 있습니다.

JavaScript 내에서 수동으로 HTML을 빌드하는 것이 성능면에서 가장 효율적입니다 (appendTo() 등의 함수를 사용하는 것 이상의 사실임). DOM 내에 숨겨진 구문을 작성한 다음 복제하는 것이 더 좋을까요?

이상적으로 나는 코드 깔끔함과 성능 사이의 균형을 제공하기 위해이를 수행하는 최적의 방법을 알고 싶습니다.

감사합니다,

는

Answer 1

JavaScript에서 HTML 문자열의 거대한 덩어리로 작업하는 것은 매우 빨리 못 생길 수 있습니다. 이런 이유로 JavaScript "템플리트 엔진"을 고려해 볼 가치가 있습니다. 복잡하지 않아도됩니다. - Resig의 this one을 확인하십시오.

만약 당신이 그때가 아니라면, 당신은 그대로 계속할 수 있습니다. DOM 조작은 문자열 조작에 비해 일반적으로 상당히 느리다는 것을 기억하십시오.

이 성능 차이의 예 :

// DOM manipulation... slow 
var items = ['list item 1', 'list item 2', 'list item 3']; 
var UL = $('<ul/>'); 
$.each(items, function(){ 
    UL.append('<li>' + this + '</li>'); 
}); 

// String manipulation...fast 
var items = ['list item 1', 'list item 2', 'list item 3']; 
var UL = $('<ul/>').append('<li>' + items.join('</li><li>') + '</li>'); 

Answer 2

Here는 설명을 찾을 수 있습니다.

Answer 3

어쩌면 가장 인기있는 방법.

백엔드에서 html 코드가 생성되었습니다. 대화 상자는 css hidden div에 있습니다. "팝업"을 원하면 다른 CSS 스타일을 적용하고 숨겨진 입력 값을 변경하면됩니다 (대화 상자가 해당 날짜와 상호 작용하는 것 같습니다).