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

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

다음은 "한 줄"의 예입니다.

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()방법 의 핵심 기능입니다 .

• http://api.jquery.com/jQuery/#creating-new-elements
• 특히 http://api.jquery.com/jQuery/#example-1-1

나는 그렇게하고있다 :

$('<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$()

var mydiv = $('<div />') // also works

var div = $('<div/>');
div.append('Hello World!');

jQuery에서 DIV 요소를 만드는 가장 짧고 쉬운 방법입니다.

방금 작은 jQuery 플러그인을 만들었습니다 : https://github.com/ern0/jquery.create

그것은 당신의 문법을 따릅니다 :

var myDiv = $.create("div");

DOM 노드 ID는 두 번째 매개 변수로 지정할 수 있습니다.

var secondItem = $.create("div","item2");

심각합니까? 아니요. 그러나이 구문은 $ ( "<div> </ div>") . 이는 그 돈에 매우 가치가 있습니다.

비슷한 기능을 가진 DOMAssistant에서 전환하는 새로운 jQuery 사용자입니다. http://www.domassistant.com/documentation/DOMAssistantContent-module.php

플러그인이 더 간단합니다. 연결 방법으로 attrs 및 내용을 추가하는 것이 좋습니다.

$("#container").append( $.create("div").addClass("box").html("Hello, world!") );

또한 간단한 jQuery 플러그인 (100 번째)에 대한 좋은 예입니다.

모두 매우 간단합니다! 여기 몇 가지 간단한 예가 있습니다 ...

var $example = $( XMLDocRoot );

var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root

$element.attr({
id: '1',
hello: 'world'
});

var $example.find('parent > child').append( $element );

이전 답변에서 언급되지 않았으므로 최신 jQuery를 사용하여 요소 요소를 만드는 방법과 콘텐츠, 클래스 또는 onclick 콜백과 같은 추가 속성을 사용하는 예제를 추가하고 있습니다.

const mountpoint = 'https://jsonplaceholder.typicode.com/users'

const $button = $('button')
const $tbody = $('tbody')

const loadAndRender = () => {
  $.getJSON(mountpoint).then(data => {

    $.each(data, (index, { id, username, name, email }) => {
      let row = $('<tr>')
        .append($('<td>', { text: id }))
        .append($('<td>', {
          text: username,
          class: 'click-me',
          on: {
            click: _ => {
              console.log(name)
            }
          }
        }))
        .append($('<td>', { text: email }))

      $tbody.append(row)
    })

  })
}

$button.on('click', loadAndRender)

.click-me {
  background-color: lightgrey
}

<table style="width: 100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

<button>Load and render</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

기본 jQuery에는 createElement와 동일한 기능이 없습니다. 실제로 jQuery 작업의 대부분은 순수한 DOM 조작보다 innerHTML을 사용하여 내부적으로 수행됩니다. Adam이 위에서 언급 한 것처럼 유사한 결과를 얻을 수있는 방법입니다.

appendDOM , DOMEC 및 FlyDOM 과 같이 innerHTML을 통해 DOM을 사용하는 플러그인도 있습니다 . 성능면에서 네이티브 jquery는 여전히 가장 성능이 뛰어납니다 (주로 innerHTML을 사용하기 때문에)