jQuery로 DOM 요소 생성

JavaScript 코드를 향상시키려는 욕구에서 jQuery의 기능을 활용하여 DOM 조작을 단순화하는 방법에 대해 궁금합니다. .

jQuery는 $.create("div")에서 알 수 있듯이 DOM 요소를 생성하는 대체 방법을 제공합니다. 그러나 이 접근 방식은 jQuery의 핵심 API의 일부가 아니며 항상 신뢰할 수 있는 것은 아닙니다.

보다 효율적이고 표준화된 솔루션을 위해 다음을 고려하십시오.

this.$OuterDiv = $('<div></div>')
    .hide()
    .append($('<table></table>')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

이 간결한 코드는 다음을 통해 원본 JavaScript와 동일한 작업을 수행합니다.

• $('
  )를 사용하여
  요소를 생성합니다.
• .hide()로 숨깁니다.
• 요소 추가 $.append(), 해당 속성을 설정하고 클래스를 추가합니다.

  벤치마킹 결과

  다양한 요소 생성 방법의 성능과 관련하여 벤치마크에서 다음이 밝혀졌습니다. document.createElement가 가장 빠릅니다. 그러나 최신 버전의 jQuery에서는 메서드 간의 시간 차이가 최소화됩니다(예: 천 요소당 3밀리초).

  jQuery 1.7.2용으로 업데이트됨

  벤치마크는 jQuery 1.7.2로 업데이트되었으며 http://jsben.ch/#/ARUtz에서 추가 탐색 및 크라우드소싱 결과를 확인할 수 있습니다.