Hướng dẫn innerhtml vs createelement - Internalhtml so với phần tử tạo

Question

Chúng ta có thể thêm các phần tử vào một phần tử DOM bằng cách tạo một phần tử và nối nó. (Giả sử chúng ta đã có một phần tử div để làm việc với chúng).

Nội dung chính Show

#1) createdEuity là người thực hiện nhiều hơn
#2) CreatEuity an toàn hơn
#3) Sử dụng tài liệuFragment để soạn các nút dom

let newElement = document.createElement('p'); 
newElement.textContent = 'New Element'; 
div.appendChild(newElement);
Code language: JavaScript (javascript)

Chúng ta cũng có thể thao tác trực tiếp trên HTML của một phần tử bằng innerHTML.

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

Sử dụng innerHTML sẽ gọn gàng hơn, đặc biệt khi chúng ta bắt đầu thêm các thuộc tính bổ sung như các lớp và sự kiện JavaScript.

div.innerHTML += '<p class="paragraph" onclick="doSomething()">New Elementp>'
Code language: HTML, XML (xml)

Mặc dù gọn gàng, việc sử dụng innerHTML sẽ tái tạo và tạo lại tất cả các nút DOM bên trong phần tử div và kém hiệu quả hơn so với việc chỉ cần thêm một phần tử mới vào div. Trong các trường hợp trên, createElement là lựa chọn hiệu quả hơn.

Tuy nhiên, innerHTML có một lợi thế khi chúng ta muốn thực hiện nhiều thao tác với một phần tử.

Ví dụ: Giả sử chúng ta phải thêm một trăm danh sách vào div.

for (i = 0; i < 100; i++) { 
 let newElement = document.createElement('p'); 
 newElement.textContent = 'New Element Number: ' + i;  
 div.appendChild(newElement); 
}
Code language: JavaScript (javascript)

Nếu chúng ta sử dụng createElement, chúng ta phải thêm vào mỗi lần lặp, dẫn đến việc tính toán lại các style, cách vẽ và bố cục mỗi lần. Điều này sẽ không hiệu quả và việc sử dụng innerHTML trong vòng lặp theo cách tương tự thậm chí còn tệ hơn rất nhiều. Nhưng điều gì sẽ xảy ra nếu chúng ta thêm đoạn HTML vào một biến và sau đó chỉ cần đặt innerHTML một lần ở cuối?

let newElements = ''; 
for (i = 0; i < 100; i++) { 
 newElements += `
New Element Number: ${i}
` 
} 
div.innerHTML =+ newElements;
Code language: JavaScript (javascript)

Như chúng ta thấy, trong các trường hợp đơn giản thực thi một lần, createElement/appendChild sẽ hiệu quả hơn nhưng trong trường hợp thực hiện nhiều thay đổi thì innerHTML có thể là lựa chọn hiệu quả hơn.

Bạn có thể kiểm tra hiệu năng của 2 cách này

Trong đoạn mã trên, tham số đầu tiên là số lần lặp mà chúng ta muốn thực thi trong mỗi vòng lặp và tham số thứ hai là kích thước mẫu (tổng số vòng lặp được thực hiện, sẽ được tính trung bình). Chạy repl bằng các số khác nhau và bạn có thể tự mình thấy sự khác biệt về hiệu năng.

Ví dụ, ta gọi hàm test(1, 100). Như mong đợi, appendChild hoạt động hiệu quả hơn khi chỉ có một lần lặp trong vòng lặp. Tuy nhiên, innerHTML cũng nhanh chóng bắt kịp hiệu suất. Ta thử gọi hàm test(5, 100) và innerHTML đã chiến thắng chỉ sau 5 lần lặp lại.

Nguồn: https://medium.com/@kevinchi118/innerhtml-vs-createelement-appendchild-3da39275a694

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Tóm tắt: Trong hướng dẫn này, bạn sẽ học được sự khác biệt giữa

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

1 và
div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)
2 khi tạo ra các yếu tố mới trong cây Dom.: in this tutorial, you’ll learn the difference between the

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

1 and

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

2 when it comes to creating new elements in the DOM tree.

#1) createdEuity là người thực hiện nhiều hơn

Giả sử rằng bạn có phần tử

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

3 với bộ chứa lớp:

<div class="container">div>



Code language: HTML, XML (xml)

Bạn có thể có các phần tử mới cho phần tử

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

3 bằng cách tạo một phần tử và thêm nó:

let div = document.querySelector('.container');

let p = document.createElement('p');
p.textContent = 'JS DOM';
div.appendChild(p);
Code language: JavaScript (javascript)

Bạn cũng có thể thao tác trực tiếp một phần tử HTML bằng cách sử dụng

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

1 như thế này:

let div = document.querySelector('.container');
div.innerHTML += '
JS DOM
';
Code language: JavaScript (javascript)

Sử dụng

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

1 là sạch hơn và ngắn hơn khi bạn muốn thêm các thuộc tính vào phần tử:

let div = document.querySelector('.container');
div.innerHTML += '
JS DOM
';
Code language: JavaScript (javascript)

Tuy nhiên, sử dụng

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

1 khiến các trình duyệt web tái sử dụng và tạo lại tất cả các nút DOM bên trong phần tử DIV. Do đó, nó kém hiệu quả hơn so với việc tạo ra một yếu tố mới và nối vào Div. Nói cách khác, việc tạo một yếu tố mới và thêm nó vào cây Dom cung cấp hiệu suất tốt hơn so với

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

1.

#2) CreatEuity an toàn hơn

Như đã đề cập trong hướng dẫn bên trong, bạn chỉ nên sử dụng nó khi dữ liệu đến từ một nguồn đáng tin cậy như cơ sở dữ liệu.

Nếu bạn đặt nội dung mà bạn không kiểm soát được bên trong, mã độc có thể được tiêm và thực thi.

#3) Sử dụng tài liệuFragment để soạn các nút dom

Giả sử rằng bạn có một danh sách các yếu tố và bạn cần trong mỗi lần lặp:

let div = document.querySelector('.container');

for (let i = 0; i < 1000; i++) {
   let p = document.createElement('p');
   p.textContent = `Paragraph ${i}`;
   div.appendChild(p);
}
Code language: JavaScript (javascript)

Mã này dẫn đến việc tính toán lại các kiểu, vẽ và bố trí mọi lần lặp. Điều này không hiệu quả lắm.

Để khắc phục điều này, bạn thường sử dụng

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

9 để soạn các nút dom và nối nó vào cây dom:

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

0

Trong ví dụ này, chúng tôi đã sáng tác các nút dom bằng cách sử dụng đối tượng

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

9 và nối đoạn đoạn vào cây dom hoạt động một lần ở cuối.

Do đó, một đoạn tài liệu không liên kết với cây dom hoạt động, do đó, nó không phải là bất kỳ hiệu suất nào.

Kiểm tra hướng dẫn

div.innerHTML += '<p>New Elementp>'
Code language: HTML, XML (xml)

9 để biết thêm chi tiết.

Hướng dẫn này có hữu ích không?

programming html innerHTML vs createElement appendChild JS createElement trong JS Append js DocumentFragment Document createElement script

Hướng dẫn innerhtml vs createelement - Internalhtml so với phần tử tạo

#1) createdEuity là người thực hiện nhiều hơn

#2) CreatEuity an toàn hơn

#3) Sử dụng tài liệuFragment để soạn các nút dom

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