[javascript] jQuery document.createElement에 해당합니까?

JAVASCRIPT / 글쓴이

오래된 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

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

답변

다음은 “한 줄”의 예입니다.

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

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

내가 함께 넣어 작은 벤치 마크를 위의 옵션을 10 회 반복의 대략 결과 여기에, 그리고 :

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의 모든 고풍 버전 제외)은 천 요소 당 약 3 밀리 초와 동일하다는 것을 기억하십시오 .

업데이트 2

jQuery 1.7.2로 업데이트 되었고 JSBen.ch기본 벤치 마크보다 약간 더 과학적인 벤치 마크를 추가했으며 지금은 크라우드 소싱이 가능합니다!

http://jsben.ch/#/ARUtz

답변

jQuery 생성자에 추가하려는 요소의 HTML을 제공하면 $()jQuery의 append()메소드를 사용하여 DOM에 추가하기에 적합한 새로 작성된 HTML에서 jQuery 객체를 반환합니다 .

예를 들면 다음과 같습니다.

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

원하는 경우이 테이블을 프로그래밍 방식으로 채울 수 있습니다.

이것은 당신이 사용하는 것보다 더 간결을 찾을 수있는 클래스 이름이나 다른 속성을 포함하여 당신이 좋아하는 임의의 HTML, 지정할 수 있습니다 createElement다음과 같은 속성을 설정 cellSpacing및 classNameJS를 통해입니다.

답변

새로운 DOM 요소 생성은이 jQuery()방법 의 핵심 기능입니다 .

답변

나는 그렇게하고있다 :

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');

답변

을 jQuery1.8사용 $.parseHTML()하여 요소를 만드는 것이 더 나은 선택입니다.

두 가지 이점이 있습니다.

1. 이전과 같은 방식을 사용하는 $(string)경우 jQuery는 문자열을 검사하여 html 태그를 선택하거나 새 요소를 생성하는지 확인합니다. 을 사용 $.parseHTML()하면 jQuery에 새 요소를 명시 적으로 작성하려고하므로 성능이 약간 향상 될 수 있습니다.

2. 훨씬 더 중요한 것은 이전 방식을 사용하는 경우 교차 사이트 공격 ( 추가 정보 )으로 고통받을 수 있다는 것입니다 . 당신이 같은 것을 가지고 있다면 :

    var userInput = window.prompt("please enter selector");
    $(userInput).hide();

나쁜 사람이 <script src="xss-attach.js"></script>당신을 놀리기 위해 입력 할 수 있습니다. 다행스럽게도이 $.parseHTML()난처함을 피하십시오.

var a = $('<div>')
// a is [<div>​</div>​]
var b = $.parseHTML('<div>')
// b is [<div>​</div>​]
$('<script src="xss-attach.js"></script>')
// jQuery returns [<script src=​"xss-attach.js">​</script>​]
$.parseHTML('<script src="xss-attach.js"></script>')
// jQuery returns []

그러나 ajQuery 객체 인 반면 bhtml 요소는 다음과 같습니다.

a.html('123')
// [<div>​123​</div>​]
b.html('123')
// TypeError: Object [object HTMLDivElement] has no method 'html'
$(b).html('123')
// [<div>​123​</div>​]

답변

최신 정보

최신 버전의 jQuery부터 다음 메소드는 두 번째 Object에 전달 된 속성을 할당하지 않습니다.

이전 답변

내가 사용하는 느낌 document.createElement('div')과 함께을 jQuery빠르게 :

$(document.createElement('div'), {
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');

답변

이것은 매우 오래된 질문이지만 최근 정보로 업데이트하는 것이 좋을 것이라고 생각했습니다.

jQuery 1.8부터 jQuery.parseHTML () 함수가 있는데, 이는 현재 요소를 작성하는 기본 방법입니다. 또한 $('(html code goes here)')공식 jQuery 웹 사이트 의 릴리스 노트 중 하나 에서 다음을 언급하는 HTML을 통해 HTML을 구문 분석하는 데 문제가 있습니다 .

편안한 HTML 구문 분석 : $ (htmlString)에서 태그 앞에 선행 공백이나 줄 바꾸기를 다시 사용할 수 있습니다. 외부 소스에서 얻은 HTML을 구문 분석 할 때 $ .parseHTML ()을 사용하는 것이 좋습니다. 향후 HTML 구문 분석을 추가로 변경할 수 있습니다.

실제 질문과 관련하여 제공된 예제는 다음과 같이 번역 될 수 있습니다.

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

불행히도 just 사용하는 것보다 편리 $()하지는 않지만 더 많은 제어 기능을 제공합니다. 예를 들어 스크립트 태그를 제외하도록 선택할 수 있습니다 (인라인 스크립트는 그대로 둡니다 onclick).

> $.parseHTML('<div onclick="a"></div><script></script>')
[<div onclick=​"a">​</div>​]

> $.parseHTML('<div onclick="a"></div><script></script>', document, true)
[<div onclick=​"a">​</div>​, <script>​</script>​]

또한 다음은 새로운 현실에 맞게 조정 된 최상위 답변의 벤치 마크입니다.

JSbin 링크

jQuery 1.9.1

  $ .parseHTML : 88ms
  $ ($. parseHTML) : 240ms
  <div> </ div> : 138ms
  <div> : 143ms
  createElement : 64ms

보다 parseHTML훨씬 더 가까운 것처럼 보이지만 결과를 새로운 jQuery 객체로 래핑하면 모든 부스트가 사라집니다.createElement$()