Cách ưa thích để tạo một phần tử mới với jQuery

Tôi đã có 2 cách tôi có thể tạo <div>bằng cách sử dụng jQuery.

Hoặc:

var div = $("<div></div>");
$("#box").append(div);

Hoặc là:

$("#box").append("<div></div>");

Những hạn chế của việc sử dụng cách thứ hai khác với khả năng sử dụng lại là gì?

Tùy chọn đầu tiên cho phép bạn linh hoạt hơn:

var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);

Và tất nhiên .html('*')ghi đè lên nội dung trong khi .append('*')không, nhưng tôi đoán, đây không phải là câu hỏi của bạn.

Một cách thực hành tốt khác là tiền tố các biến jQuery của bạn với $:
Có bất kỳ lý do cụ thể nào đằng sau việc sử dụng $ với biến trong jQuery không

Đặt dấu ngoặc kép quanh "class"tên thuộc tính sẽ làm cho nó tương thích hơn với các trình duyệt kém linh hoạt hơn.

Cá nhân tôi nghĩ rằng mã quan trọng hơn để có thể đọc và chỉnh sửa được hơn là hiệu suất. Bất cứ cái nào bạn thấy dễ nhìn hơn và nó nên là cái bạn chọn cho các yếu tố trên. Bạn có thể viết nó dưới dạng:

$('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

Và Phương pháp đầu tiên của bạn là:

// create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

Nhưng khi có thể đọc được; Cách tiếp cận jQuery là yêu thích của tôi . Thực hiện theo các mẹo, ghi chú và thực tiễn tốt nhất về jQuery này

Cách biểu cảm hơn nhiều,

jQuery('<div/>', {
    "id": 'foo',
    "name": 'mainDiv',
    "class": 'wrapper',
    "click": function() {
      jQuery(this).toggleClass("test");
    }}).appendTo('selector');

Tham khảo: Tài liệu

Theo tài liệu chính thức của jQuery

Để tạo một phần tử HTML, $("<div/>")hoặc $("<div></div>")được ưa thích.

Sau đó, bạn có thể sử dụng một trong hai appendTo, append, before, aftervà vv ,. để chèn phần tử mới vào DOM.

PS: jQuery Phiên bản 1.11.x

Theo tài liệu cho 3.4 , nên sử dụng các thuộc tính với attr()phương thức.

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});

Tôi muốn giới thiệu tùy chọn đầu tiên, nơi bạn thực sự xây dựng các phần tử bằng jQuery. cách tiếp cận thứ hai chỉ đơn giản là đặt thuộc tính bên trong của phần tử thành một chuỗi, điều này xảy ra là HTML và dễ bị lỗi hơn và kém linh hoạt hơn.

Nếu #boxtrống rỗng, không có gì, nhưng nếu nó không làm những điều rất khác nhau. Cái trước sẽ thêm một divnút con cuối cùng của #box. Sau này hoàn toàn thay thế nội dung của #boxvới một trống div, văn bản và tất cả.

Cũng có thể tạo một phần tử div theo cách sau:

var my_div = document.createElement('div');

thêm lớp

my_div.classList.add('col-10');

cũng có thể thực hiện append()vàappendChild()