jQuery document.createEuity tương đương?

Tôi đang cấu trúc lại một số mã JavaScript cũ và có rất nhiều thao tác DOM đang diễn ra.

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);

Tôi muốn biết liệu có cách nào tốt hơn để làm điều này bằng cách sử dụng jQuery. Tôi đã thử nghiệm với:

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

Nhưng tôi không chắc điều này có tốt hơn không.

Đây là ví dụ của bạn trong dòng "một".

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

Cập nhật : Tôi nghĩ rằng tôi sẽ cập nhật bài đăng này vì nó vẫn nhận được khá nhiều lưu lượng truy cập. Trong các bình luận bên dưới, có một số cuộc thảo luận về $("<div>")vs $("<div></div>")vs $(document.createElement('div'))như một cách tạo ra các yếu tố mới và đó là "tốt nhất".

Tôi đưa ra một điểm chuẩn nhỏ và đây là kết quả của việc lặp lại các tùy chọn trên 100.000 lần:

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

Tôi nghĩ đó không phải là một bất ngờ lớn, nhưng document.createElementlà phương pháp nhanh nhất. Tất nhiên, trước khi bạn tắt và bắt đầu cấu trúc lại toàn bộ cơ sở mã của mình, hãy nhớ rằng sự khác biệt mà chúng ta đang nói ở đây (trong tất cả trừ các phiên bản cổ xưa của jQuery) tương đương với khoảng 3 mili giây trên một nghìn phần tử .

Cập nhật 2

Đã cập nhật cho jQuery 1.7.2 và đặt điểm chuẩn vào JSBen.chđó có lẽ khoa học hơn một chút so với điểm chuẩn nguyên thủy của tôi, cộng với nó có thể được cộng đồng ngay bây giờ!

http://jsben.ch/#/ARUtz

Chỉ cần cung cấp HTML của các phần tử bạn muốn thêm vào hàm tạo jQuery $()sẽ trả về một đối tượng jQuery từ HTML mới được xây dựng, phù hợp để được thêm vào DOM bằng append()phương thức của jQuery .

Ví dụ:

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

Sau đó, bạn có thể điền vào bảng này theo chương trình, nếu bạn muốn.

Điều này cung cấp cho bạn khả năng chỉ định bất kỳ HTML tùy ý nào bạn thích, bao gồm tên lớp hoặc các thuộc tính khác mà bạn có thể tìm thấy ngắn gọn hơn so với sử dụng createElementvà sau đó đặt các thuộc tính như cellSpacingvà classNamethông qua JS.

Tạo các phần tử DOM mới là một tính năng cốt lõi của jQuery()phương thức, xem:

• http://api.jquery.com/jQuery/#creating-new-elements
• và đặc biệt http://api.jquery.com/jQuery/#example-1-1

Tôi đang làm như thế:

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

kể từ khi jQuery1.8sử dụng $.parseHTML()để tạo các yếu tố là một lựa chọn tốt hơn.

Có hai lợi ích:

1. nếu bạn sử dụng cách cũ, có thể giống như vậy $(string), jQuery sẽ kiểm tra chuỗi để đảm bảo bạn muốn chọn thẻ html hoặc tạo một phần tử mới. Bằng cách sử dụng $.parseHTML(), bạn nói với jQuery rằng bạn muốn tạo một phần tử mới một cách rõ ràng, vì vậy hiệu suất có thể tốt hơn một chút.

2. điều quan trọng hơn là bạn có thể bị tấn công chéo trang ( thêm thông tin ) nếu bạn sử dụng cách cũ. nếu bạn có một cái gì đó như:

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

một kẻ xấu có thể nhập vào <script src="xss-attach.js"></script>để trêu chọc bạn. may mắn thay, $.parseHTML()tránh sự bối rối này cho bạn:

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 []

Tuy nhiên, xin lưu ý rằng đó alà một đối tượng jQuery trong khi blà một phần tử html:

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

CẬP NHẬT

Kể từ các phiên bản mới nhất của jQuery, phương thức sau không gán các thuộc tính được truyền trong Đối tượng thứ hai

Câu trả lời trước

Tôi cảm thấy sử dụng document.createElement('div')cùng với jQuerynhanh hơn:

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

Mặc dù đây là một câu hỏi rất cũ, tôi nghĩ sẽ rất tốt nếu cập nhật nó với thông tin gần đây;

Vì jQuery 1.8 có hàm jQuery.parseHTML () hiện là cách tạo phần tử ưa thích. Ngoài ra, có một số vấn đề với việc phân tích cú pháp HTML thông qua $('(html code goes here)'), ví dụ trang web chính thức của jQuery đề cập đến những điều sau đây trong một trong các ghi chú phát hành của họ :

Phân tích cú pháp HTML thư giãn: Một lần nữa bạn có thể có các khoảng trắng hoặc dòng mới hàng đầu trước các thẻ trong $ (htmlString). Chúng tôi vẫn khuyên bạn nên sử dụng $ .parseHTML () khi phân tích cú pháp HTML thu được từ các nguồn bên ngoài và có thể thực hiện thêm các thay đổi đối với phân tích cú pháp HTML trong tương lai.

Để liên quan đến câu hỏi thực tế, ví dụ được cung cấp có thể được dịch thành:

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

Thật không may, ít thuận tiện hơn so với chỉ sử dụng $(), nhưng nó mang lại cho bạn nhiều quyền kiểm soát hơn, ví dụ bạn có thể chọn loại trừ các thẻ script ( onclickmặc dù vậy nó sẽ để lại các tập lệnh nội tuyến như sau ):

> $.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>​]

Ngoài ra, đây là một điểm chuẩn từ câu trả lời hàng đầu được điều chỉnh theo thực tế mới:

Liên kết JSbin

jQuery 1.9.1

  $ .parseHTML: 88ms
  $ ($. ParseHTML): 240ms
  <div> </ div>: 138ms
  <div>: 143ms
  tạoEuity: 64ms

Có vẻ như parseHTMLgần createElementhơn nhiều so với $(), nhưng tất cả sự tăng cường đã biến mất sau khi gói các kết quả trong một đối tượng jQuery mới

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

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

Là cách ngắn nhất / dễ nhất để tạo phần tử DIV trong jQuery.

Tôi vừa tạo một plugin jQuery nhỏ cho điều đó: https://github.com/ern0/jquery.create

Nó theo cú pháp của bạn:

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

ID nút DOM có thể được chỉ định làm tham số thứ hai:

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

Có nghiêm trọng không? Không. Nhưng cú pháp này tốt hơn $ ("<div> </ div>") và đó là một giá trị rất tốt cho số tiền đó.

Tôi là người dùng jQuery mới, chuyển đổi từ DOMAssistant, có chức năng tương tự: http://www.domassistant.com/documentation/DOMAssistantContent-module.php

Plugin của tôi đơn giản hơn, tôi nghĩ attrs và nội dung tốt hơn để thêm bằng các phương thức xâu chuỗi:

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

Ngoài ra, đây là một ví dụ tốt cho một plugin jQuery đơn giản (thứ 100).

Tất cả đều khá thẳng về phía trước! Đây là một vài ví dụ nhanh ...

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 );

Không được đề cập trong các câu trả lời trước, vì vậy tôi đang thêm ví dụ hoạt động về cách tạo các phần tử phần tử với jQuery mới nhất, cũng với các thuộc tính bổ sung như nội dung, lớp hoặc gọi lại 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 ra khỏi hộp không có tương đương với creatEuity. Trong thực tế, phần lớn công việc của jQuery được thực hiện bên trong bằng cách sử dụng InternalHTML qua thao tác DOM thuần túy. Như Adam đã đề cập ở trên, đây là cách bạn có thể đạt được kết quả tương tự.

Ngoài ra còn có các plugin có sẵn sử dụng DOM trên InternalHTML như appendDOM , DOMEC và FlyDOM chỉ để đặt tên cho một số. Hiệu suất khôn ngoan, jquery bản địa vẫn là hiệu suất cao nhất (chủ yếu là vì nó sử dụng InternalHTML)