jQuery document.createElement 와 같은 기능

질문 : jQuery document.createElement에 해당합니까?

---

나는 오래된 JavaScript 코드를 리팩토링하고 있으며 많은 DOM 조작이 진행되고 있습니다.

var d = document;
var odv = d.createElement("div");
odv.style.display = "none";
this.OuterDiv = odv;

var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);

jQuery를 사용하여 더 나은 방법이 있는지 알고 싶습니다. 나는 다음과 같은 실험을 해왔다.

var odv = $.create("div");
$.append(odv);
// And many more

그러나 이것이 더 나은지 확실하지 않습니다.

답변

---

다음은 "1"줄에있는 예입니다.

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

업데이트 : 여전히 많은 트래픽이 발생하기 때문에이 게시물을 업데이트 할 것이라고 생각했습니다. 아래 주석에는 새 요소를 만드는 방법으로 $("<div>") 대 $("<div></div>") 대 $(document.createElement('div')) 에 대한 토론이 있습니다. "최고"입니다.

나는 작은 벤치 마크 를 작성했고, 위의 옵션을 100,000 번 반복 한 결과는 대략 다음과 같습니다.

jQuery 1.4, 1.5, 1.6

               Chrome 11  Firefox 4   IE9
<div>            440ms      640ms    460ms
<div></div>      420ms      650ms    480ms
createElement    100ms      180ms    300ms

jQuery 1.3

                Chrome 11
<div>             770ms
<div></div>      3800ms
createElement     100ms

jQuery 1.2

                Chrome 11
<div>            3500ms
<div></div>      3500ms
createElement     100ms

큰 놀라움은 아니지만 document.createElement 가 가장 빠른 방법입니다. 물론 전체 코드베이스를 리팩토링하기 전에 여기에서 이야기하는 차이점 (jQuery의 구 버전을 제외한 모든 버전에서)이 1,000 개 요소 당 약 3 밀리 초에 해당한다는 점을 기억하십시오.

업데이트 2

jQuery 1.7.2 용으로 업데이트되고 JSBen.ch 벤치 마크를 추가했습니다.이 벤치 마크는 내 원시 벤치 마크보다 약간 더 과학적 일 것입니다. 또한 지금 크라우드 소싱 할 수 있습니다!

http://jsben.ch/#/ARUtz

출처 : https://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent