Nối jquery html lớn

var data = [
    { type: "Name", content: "John Doe" },
    { type: "Birthdate", content: "01/01/1970" },
    { type: "Salary", content: "$40,000,000" },
    // ...300 more rows...
    { type: "Favorite Flavour", content: "Sour" }
];

var data = [
    { type: "Name", content: "John Doe" },
    { type: "Birthdate", content: "01/01/1970" },
    { type: "Salary", content: "$40,000,000" },
    // ...300 more rows...
    { type: "Favorite Flavour", content: "Sour" }
];

Trong số các tùy chọn này, tùy chọn này phụ thuộc vào jQuery nhiều nhất

1. Sử dụng Array hiện đại. * phương pháp

var $myTable = $['#my-table'];

// Looping with the .map[] method
//  - This will give us a brand new array based on the result of our callback function
var rowElements = data.map[function [ row ] {

    // Create a row
    var $row = $['

var data = [
    { type: "Name", content: "John Doe" },
    { type: "Birthdate", content: "01/01/1970" },
    { type: "Salary", content: "$40,000,000" },
    // ...300 more rows...
    { type: "Favorite Flavour", content: "Sour" }
];

var data = [
    { type: "Name", content: "John Doe" },
    { type: "Birthdate", content: "01/01/1970" },
    { type: "Salary", content: "$40,000,000" },
    // ...300 more rows...
    { type: "Favorite Flavour", content: "Sour" }
];

Chức năng tương đương với chức năng trước đó, chỉ dễ đọc hơn

1. Sử dụng các chuỗi HTML [thay vì các phương thức tích hợp sẵn của jQuery]

// ...
var rowElements = data.map[function [ row ] {
    var rowHTML = '

var data = [
    { type: "Name", content: "John Doe" },
    { type: "Birthdate", content: "01/01/1970" },
    { type: "Salary", content: "$40,000,000" },
    // ...300 more rows...
    { type: "Favorite Flavour", content: "Sour" }
];

Hoàn toàn hợp lệ nhưng một lần nữa, không được đề xuất. Điều này buộc jQuery phải phân tích một lượng văn bản rất lớn cùng một lúc và không cần thiết. jQuery hoạt động rất tốt khi được sử dụng đúng cách

Kết hợp nhiều phần tử và nối thêm các phần tử vào DOM là một quá trình quan trọng, nó sẽ trở thành một quá trình tốn thời gian. Nếu không được xử lý đúng cách, là nhà phát triển, chúng ta nên biết cách cập nhật DOM hiệu quả. Vì vậy, sau đây là ba cách để nối các phần tử HTML vào DOM. Các phương pháp sau đây được sắp xếp theo thứ tự giảm dần về độ phức tạp của thời gian

• Sử dụng phương thức append của jQuery
• Nối các phần tử bằng cách sử dụng chuỗi thay vì các nút
• Sử dụng JavaScript thuần túy để tạo và nối thêm nút

Đối với hướng dẫn này, chúng tôi sẽ giả định rằng nhiệm vụ của chúng tôi là nối thêm 10 mục danh sách vào phần nội dung của trang web

Cách tiếp cận 1. Cách tiếp cận này sử dụng phương thức append[] của jQuery để đặt phần tử DOM mà bạn muốn chèn vào

• Thí dụ