Html sang mảng JavaScript

Tuần trước, chúng ta đã xem xét hai cách khác nhau để tạo HTML từ một mảng dữ liệu và một số cân nhắc về hiệu suất với các kỹ thuật

Hôm nay, tôi muốn chỉ cho bạn thêm hai cách để tạo HTML từ dữ liệu mảng với vanilla JS

Chúng ta sẽ lại sử dụng mảng thuật sĩ tuyệt vời của mình và tạo một danh sách không có thứ tự từ đó

var wizards = ['Hermione', 'Neville', 'Gandalf', 'Radagast'];

Tạo một phần tử

Đối với cách tiếp cận này, chúng tôi sẽ sử dụng phương pháp createElement() để tạo các phần tử của chúng tôi và appendChild() để đưa chúng vào DOM

Đầu tiên, hãy tạo danh sách không có thứ tự

// Create an unordered list
var list = document.createElement('ul');

Sau đó, chúng tôi sẽ sử dụng phương pháp Array.forEach() để lặp qua từng trình hướng dẫn và tạo một mục danh sách. Sau đó, chúng tôi sẽ nối mục danh sách vào phần tử

// Create an unordered list
var list = document.createElement('ul');

0 của chúng tôi

// Create an unordered list
var list = document.createElement('ul');

// Create a list item for each wizard
// and append it to the list
wizards.forEach(function (wizard) {
	var li = document.createElement('li');
	li.textContent = wizard;
	list.appendChild(li);
});

Bạn có thể sử dụng appendChild() để tự đưa danh sách vào DOM

var app = document.querySelector('#app');
app.appendChild(list);

Đây là một bản demo

Tạo một đoạn

Tạo các phần tử là một giải pháp thay thế tốt cho

// Create an unordered list
var list = document.createElement('ul');

2 khi bạn có nội dung do bên thứ ba hoặc người dùng cung cấp

Chèn nội dung của bên thứ ba với

// Create an unordered list
var list = document.createElement('ul');

2 khiến bạn có nguy cơ bị tấn công kịch bản chéo trang (XSS). Sử dụng

// Create an unordered list
var list = document.createElement('ul');

4 để thêm nội dung của bạn sẽ loại bỏ rủi ro đó

Tuy nhiên, việc tạo HTML bằng

// Create an unordered list
var list = document.createElement('ul');

5 có thể chậm. Các mảnh là một sự thay thế hiệu suất cao hơn

Mảnh vỡ là gì?

Một đoạn là một nút không được gắn vào bất kỳ thứ gì và không phải là một phần của cây DOM

Bởi vì nó không gắn với bất kỳ thứ gì, không giống như các nút được tạo bằng createElement(), trình duyệt phải thực hiện ít công việc hơn. Thật kỳ lạ, mặc dù các yếu tố trong phương pháp trước đây chưa thực sự có trong trang được hiển thị, nhưng trình duyệt vẫn đang hoạt động ngầm ảnh hưởng đến hiệu suất

Làm thế nào nó hoạt động

Kỹ thuật này khá giống với phương pháp trước, nhưng có một vài thay đổi nhỏ

Chúng tôi vẫn sẽ tạo danh sách không có thứ tự của mình, nhưng chúng tôi cũng sẽ sử dụng

// Create an unordered list
var list = document.createElement('ul');

7 để tạo một đoạn DOM mới

// Create an unordered list
var list = document.createElement('ul');

// Create a fragement
var fragment = document.createDocumentFragment();

Trong vòng lặp của chúng tôi, thay vì nối trực tiếp từng mục danh sách vào danh sách, chúng tôi sẽ nối nó vào đoạn

// Create an unordered list
var list = document.createElement('ul');

// Create a fragement
var fragment = document.createDocumentFragment();

// Create a list item for each wizard
// and append it to the fragment
wizards.forEach(function (wizard) {
	var li = document.createElement('li');
	li.textContent = wizard;
	fragment.appendChild(li);
});

Sau khi hoàn thành vòng lặp, chúng ta có thể nối đoạn của mình vào chính danh sách

Vì đoạn không phải là bất kỳ loại nút cụ thể nào, điều này chỉ thêm tất cả nội dung chúng tôi đã tạo vào danh sách. Không có yếu tố nào khác trong đó. Đầu ra giống như cách tiếp cận trước đây của chúng tôi

// Create an unordered list
var list = document.createElement('ul');

// Create a fragement
var fragment = document.createDocumentFragment();

// Create a list item for each wizard
// and append it to the fragment
wizards.forEach(function (wizard) {
	var li = document.createElement('li');
	li.textContent = wizard;
	fragment.appendChild(li);
});

// Append the fragement to the list
list.appendChild(fragment);

Đây là một bản demo khác với kỹ thuật này

Bạn nên sử dụng cái nào?

Để lặp qua một mảng nội dung, các đoạn. Ngay cả khi chỉ với một vài mục, nó vẫn nhanh hơn

Ngày mai, chúng ta sẽ xem xét một số so sánh hiệu suất cho các kỹ thuật khác nhau mà chúng ta đã đề cập trong loạt bài này

Làm cách nào để chuyển đổi HTML thành mảng trong JavaScript?

Làm cách nào để lấy giá trị mảng trong HTML bằng JavaScript?

Làm cách nào để tạo một mảng trong HTML?

Làm cách nào để tạo danh sách HTML trong JavaScript?