Cách tốt nhất để tạo ra các yếu tố DOM mới

Question

Sử dụng jquery là nó tốt hơn để tạo ra một phần tử DOM như thế này: -

function create(options) 
{ 
    $('<form action="' + options.action + '"></form>');  
} 

Hoặc như thế này:

function create(options) 
{ 
    $form = $('<form></form>'); 
    $form.attr('action',options.action); 
} 

Đây có thể là một vấn đề quan điểm. Tôi cảm thấy rằng cách thứ hai cho thấy rõ ràng hơn nhưng tôi nghi ngờ nó kém hiệu quả hơn ...

Answer 1

jQuery có thể tạo đối tượng như đoạn mã sau

$form = $('<form>', {action: 'my action'}); 

class là một từ dành riêng trong IE và cần phải được trích dẫn . Xem danh sách đầy đủ các từ dành riêng: Reserved Keywords in Javascript

Answer 2

Trừ khi bạn đang chạy chức năng này nhiều lần, bất kỳ sự khác biệt hiệu suất nào cũng sẽ không đáng kể. Vì vậy, tôi sẽ luôn luôn đi với rõ ràng nhất, dễ dàng nhất để cập nhật giải pháp (tức là thứ hai.)

Answer 3

Tôi luôn làm điều thứ hai.

function create(options) 
{ 
    $form = $('<form></form>'); 
    $form.attr('action',options.action); 
} 

Tôi thích phương pháp này đơn giản vì nó dễ đọc hơn.

Answer 4

Check this để tự tìm hiểu.

Note cao hơn là tốt hơn (OPS/Sec = operations per second = how many times per second the given code executes)

Và người chiến thắng thử nghiệm trong tất cả các trình duyệt khác ngoài Opera:

var form = document.createElement("form"), 
    $form = $(form); 
form.action = options.action; 

---

LƯU Ý:

phương pháp tự nhiên sẽ thậm chí còn nhanh hơn nếu bạn không cần một jQuery đối tượng:

var form = document.createElement("form"); 
form.action = options.action; 

Answer 5

Chưa bao giờ đau khổ để tối ưu hóa ... cho đến khi nó ... bạn có thể sử dụng thẳng lên JS:

function create(options) 
{ 
    var newform = document.createElement('form'); 

    newform.setAttribute('action',options.action); 
} 

Bên cạnh đó nó không đáng kể như đã đề cập ở trên, mọi thứ dễ đọc hơn cho bạn ... tức là tùy chọn 2

Answer 6

Không chắc chắn về mã gạch chân thực tế của jquery và không thể biết cái nào có hiệu suất tốt hơn.

Dù sao tôi có thể tưởng tượng, trong trường hợp đầu tiên, jquery sẽ phân tích cú pháp các thuộc tính và đặt giá trị cho chúng, vì vậy không nên có sự khác biệt lớn về hiệu suất.

Vì vậy, tôi nghĩ giải pháp đầu tiên thuận tiện hơn nếu nó chứa nhiều mã html, nếu không tôi sẽ ưu tiên thứ hai.