Câu hỏi jQuery document.createElement tương đương?


Tôi đang tái cấu trúc 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 nếu có một cách 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 liệu điều này có tốt hơn không.


1136
2017-11-06 12:26


gốc


jsben.ch/#/ARUtz - điểm chuẩn cho jquery vs createElement - EscapeNetscape
Có thể trùng lặp Tạo một phần tử div trong jQuery - T.Todua


Các câu trả lời:


đâ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 muốn 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 phần bình luận bên dưới có một số thảo luận về $("<div>") so với $("<div></div>") so với $(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 đặt lại với nhau 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ĩ rằng nó không có bất ngờ lớn, nhưng document.createElement là phương pháp nhanh nhất. Tất nhiên, trước khi bạn đi và bắt đầu refactoring toàn bộ codebase của bạn, hãy nhớ rằng sự khác biệt chúng tôi đang nói về ở đây (trong tất cả, nhưng các phiên bản cổ của jQuery) tương đương với khoảng thêm 3 mili giây mỗi 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 trên JSBen.ch mà có lẽ khoa học hơn một chút so với các tiêu 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


1200
2017-11-06 12:34



Bạn sẽ thấy rằng document.createElement nhanh hơn nhiều so với việc jQuery chuyển đổi chuỗi html của bạn thành một phần tử. (chỉ trong trường hợp bạn có một yêu cầu để làm cho mọi thứ hiệu quả hơn) - Sugendran
Đó là sự thật cho jQuery <1.3 Đó là tốc độ tương đương bây giờ tôi tin tưởng. - Rob Stevenson-Leggett
@ Kevin, đó là sự thật, tuy nhiên nó làm cho jQuery làm việc nhiều hơn (nó chạy nó thông qua một regex để thêm thẻ đóng), vì vậy tôi thích phương pháp trên. Ngoài ra, nó phân biệt mã của bạn với $('div') cái nhìn rất giống nhau, nhưng có chức năng khác nhau. - nickf
Vì vậy, về cơ bản, sự kết hợp của @Sungendran & @nickf sẽ là $(document.createElement('div')) và nó phải là nhanh nhất? - Kolky
Tôi nghĩ rằng "đúng" cách là $ ('<div />'), với, IMO, thậm chí còn có nhiều "ý nghĩa", vì nó khá rõ ràng bạn đang tạo ra một nút. Điều xấu là cách này phá vỡ cú pháp tô sáng trong tất cả các biên tập viên = ( - Erik Escobedo


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

Ví dụ:

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

Sau đó, bạn có thể điền bảng này theo lập trình, nếu bạn muốn.

Điều này mang lại cho bạn khả năng chỉ định bất kỳ HTML tùy ý nào mà 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 việc sử dụng createElement và sau đó thiết lập các thuộc tính như cellSpacing và className qua JS.


123
2017-11-06 12:30



Có thể điều này là hiển nhiên và được chỉ ra bởi ví dụ của bạn, nhưng tạo một phần tử jQuery DOM bằng cú pháp $ ("<html string>"), không thể được nối vào DOM bằng cách sử dụng phương thức <element> .appendChild gốc hoặc tương tự. Bạn phải sử dụng phương thức chắp thêm jQuery. - Adam
$(htmlStr) được triển khai như document.createElement("div").innerHTML = htmlStr. Nói cách khác, nó sẽ gọi trình phân tích cú pháp HTML của trình duyệt. HTML không đúng định dạng khác nhau trong IE so với các trình duyệt khác. - Matthew
Đối tượng @Adam jQuery có get hàm trả về phần tử DOM gốc. (Tôi biết chủ đề này là cũ, nhưng tôi thêm nó để tham khảo. ;-)) - Randy Marsh
Nếu bạn gặp sự cố với chuỗi html, hãy thử phân tích cú pháp bằng jQuery.parseHTML - fguillen
@Adam Or, nếu nó dễ dàng hơn trên luồng / mắt mã của bạn, bạn có thể làm [dom element].appendChild($('<html>')[0]); - ACK_stoverflow


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 pháp, xem:


63
2017-07-15 07:14



Cảm ơn bạn đã liên kết tài liệu! $('<a>') không thể hủy được! - Colonel Panic


kể từ đó jQuery1.8, sử dụng $.parseHTML() để tạo ra 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ể là một cái gì đó như $(string), jQuery sẽ kiểm tra chuỗi để đảm bảo bạn muốn chọn thẻ html hoặc tạo 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 trang web chéo (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 <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 a là một đối tượng jQuery trong khi b là 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>​]

39
2018-01-24 03:01



+1 cho sự khác biệt giữa a và b - Kyle Marimon
"Lựa chọn tốt hơn" để "tạo [bất kỳ phần tử]" nào có thể mạnh mẽ. Câu trả lời của @ siergiej làm tốt công việc nói parseHTML là tốt cho html đến từ các nguồn bên ngoài, nhưng đó là "tất cả các tăng đã biến mất sau khi gói các kết quả trong một đối tượng jQuery mớiĐó là, nếu bạn muốn mã hóa cứng việc tạo ra một phần tử html bọc jQuery mới, $("<div>stuff</div>") phong cách vẫn có vẻ giành chiến thắng. - ruffin


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

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

36
2017-11-24 18:07





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

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

34
2018-06-18 05:53





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

Kể từ jQuery 1.8 có một jQuery.parseHTML () chức năng mà bây giờ là một cách ưa thích của việc tạo ra các yếu tố. Ngoài ra, có một số vấn đề với phân tích cú pháp HTML 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: Bạn có thể một lần nữa có không gian hàng đầu hoặc   dòng mới trước thẻ trong $ (htmlString). Chúng tôi vẫn khuyên rằng   bạn sử dụng $ .parseHTML () khi phân tích cú pháp HTML thu được từ bên ngoài   nguồn 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 sang:

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

mà không may là ít tiện lợi hơn chỉ sử dụng $()nhưng nó cung cấp 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ẻ tập lệnh (nó sẽ để lại các tập lệnh nội tuyến như onclick Tuy nhiên):

> $.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à đ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): 240 mili giây
  <div> </ div>: 138 mili giây
  <div>: 143 mili giây
  createElement: 64 mili giây

Nó có vẻ như parseHTML gần hơn với createElement hơn $(), nhưng tất cả tăng đã biến mất sau khi gói các kết quả trong một đối tượng jQuery mới


25
2017-09-29 19:01





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

11
2017-11-17 17:03