Nối jquery html lớn

Question

Mỗi kiểu sẽ buộc trình duyệt tính toán lại các giá trị chiều rộng, chiều cao và vị trí của mọi phần tử, cùng với bất kỳ kiểu nào khác - trừ khi chúng được phân tách bằng ranh giới bố cục, điều không may đối với ví dụ này (vì chúng là con cháu của element), they cannot.

At small amounts and few columns, this performance penalty will certainly be negligible. But we want every millisecond to count.

Nội dung chính Show

 Add to a separate array, append after loop completes
Sử dụng Array hiện đại. * phương pháp
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)
Làm cách nào để nối thêm thẻ trong jQuery?
Tôi có thể sử dụng cái gì thay vì nối thêm vào JavaScript?
Làm cách nào để nối thêm HTML lớn trong jQuery?
Làm cách nào để thêm một khối HTML trong JS?

Better options

Add to a separate array, append after loop completes

________3) should also be avoided wherever possible. */ // Keep the table cached in a variable then use it until you think it's been removed var $myTable = $('#my-table'); // To hold our newjQuery objects var rowElements = []; var count = data.length; var i; var row; // Loop over the array for ( i = 0; i < count; ++i ) { rowElements.push( $('').append( $('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" }
];
0var 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" }
];
1
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
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" }
];
2_______0_______3var 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" }
];
4Chức năng tương đương với chức năng trước đó, chỉ dễ đọc hơn
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" }
];
5Hoà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ụ



<html>
 
<head>
    <<0>
<2______12_______3
    <5_______12_______0>
    <html0 html1html2
html3>
    <5html0>
    <html0>
<2_______14_______4



>5>6
 
<2>9
 0 1 2 3
 4 5
 4 7 8 9
 0<1
<2_______12_______1
    <5html0>
<5head>
 
<head3>
    <head7 head8html2>0>
<2_______14_______3
    <5head7>
    <    0     1html2_______19_______3>
<2_______12__________    7     1html2<0>
 0<15_______8<5_______15_______8>
<2_______12_______5    7>
    <5    0>
<5head3>
 
<5html12_______12



đầu ra
Cách tiếp cận 2. Nối các phần tử bằng cách sử dụng chuỗi thay vì các nút. Khai báo một chuỗi JavaScript trống để lưu trữ các phần tử HTML trong chuỗi đó. Tiếp tục thêm các phần tử mới vào một chuỗi. Nối chuỗi đó vào tài liệu hoặc một số nút DOM đã tồn tại bằng cách sử dụng phương thức append() của jQuery
Thí dụ



<html>
 
<head>
    <<0>
<2______12_______3
    <5_______12_______0>
    <html0 html1html2
html3>
    <5html0>
    <html0>
<2_______14_______4
>5>6
 
<2_______12_______52
 0<54
 0 1 2 3
 4<60 8<62



 0<1
 0<66
 0<68
<2_______12_______1
    <5html0>
<5head>
 
<head3>
    <head7 head8html2<87>
<89<90
    <5head7>
    <    0     1html2_______19_______3>
<2_______12__________    7     1html2<0>
 0<15_______8<5_______15_______8>
<2_______12_______5    7>
    <5    0>
<5head3>
 
<5html13_______29
đầu ra
Cách tiếp cận 3. Nối các phần tử bằng JavaScript thuần túy. sử dụng tài liệu. phương thức createElement() với Tên thẻ của phần tử trong Đối số. Đặt giá trị trong thuộc tính của phần tử. Dưới đây là thiết lập thuộc tính InternalHTML của phần tử danh sách. Nối phần tử mới được tạo vào một đoạn bằng phương thức appendChild. Nối đoạn vào phần thân của DOM hoặc một số nút DOM đã tồn tại
 
Làm cách nào để nối thêm thẻ trong jQuery?
Phương thức chắp thêm() của jQuery
. Mẹo. Để chèn nội dung vào đầu các phần tử đã chọn, hãy sử dụng phương thức prepend(). The append() method inserts specified content at the end of the selected elements. Tip: To insert content at the beginning of the selected elements, use the prepend() method.
Tôi có thể sử dụng cái gì thay vì nối thêm vào JavaScript?
Bạn có thể sử dụng tài liệu.  tạo thành phần . 
Làm cách nào để nối thêm HTML lớn trong jQuery?
chỉ cần thêm như thế này $(#element).  . 
 Sử dụng "+" để nối các đoạn mã HTML
 Sử dụng "\" để thoát
 Sử dụng "`" (dấu lùi, dấu huyền), không cần thao tác gì thêm. . 
 Add a hidden tag containing the same HTML code you need, e.g.  , then use ..
 
Làm cách nào để thêm một khối HTML trong JS?
Trả lời. Sử dụng toán tử nối (+)
. Bạn nên sử dụng dấu nháy đơn trong khi cố định khối mã HTML, điều này sẽ giúp dễ dàng giữ nguyên dấu nháy kép trong mã HTML thực tế hơn.

programming html

Nối jquery html lớn

Add to a separate array, append after loop completes

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

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)

Làm cách nào để nối thêm thẻ trong jQuery?

Tôi có thể sử dụng cái gì thay vì nối thêm vào JavaScript?

Làm cách nào để nối thêm HTML lớn trong jQuery?

Làm cách nào để thêm một khối HTML trong JS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

`Add to a separate array, append after loop completes`