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).
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 Element</p>'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 Element</p>'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 += `<p>New Element Number: ${i}</p>`
}
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.
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.
