Document createElement là gì

Chúng ta hoàn toàn có thể thêm những thành phần vào một thành phần DOM bằng cách tạo một thành phần và nối nó. ( Giả sử tất cả chúng ta đã có một thành phần div để thao tác với chúng ) .Nội dung chính

• Bài viết liên quan
• Video liên quan

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 thành phần bằng innerHTML .

div.innerHTML += ‘

New Element< p p>

‘

Code language : HTML, XML (xml)Sử dụng innerHTML sẽ ngăn nắp hơn, đặc biệt quan trọng khi tất cả chúng ta khởi đầu thêm những thuộc tính bổ trợ như những lớp và sự kiện JavaScript .

div.innerHTML += ‘

New Element< p p>

‘Code language : HTML, XML (xml)Mặc dù ngăn nắp, việc sử dụng innerHTML sẽ tái tạo và tạo lại tổng thể những nút DOM bên trong thành phần div và kém hiệu suất cao hơn so với việc chỉ cần thêm một thành phần mới vào div. Trong những trường hợp trên, createElement là lựa chọn hiệu suất cao hơn .

Tổng hợp 200+ tài liệu, sách, bài thực hành, video hướng dẫn lập trình từ cơ bản đến nâng cao

Tuy nhiên, innerHTML có một lợi thế khi tất cả chúng ta muốn thực thi nhiều thao tác với một thành phần .Ví dụ : Giả sử tất cả chúng ta phải thêm một trăm list 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 tất cả chúng ta sử dụng createElement, tất cả chúng ta phải thêm vào mỗi lần lặp, dẫn đến việc thống kê giám sát lại những style, cách vẽ và bố cục tổng quan mỗi lần. Điều này sẽ không hiệu suất cao và việc sử dụng innerHTML trong vòng lặp theo cách tương tự như thậm chí còn còn tệ hơn rất nhiều. Nhưng điều gì sẽ xảy ra nếu tất cả 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: USD { i }

`

}
div.innerHTML =+ newElements;

Code language : JavaScript (javascript)Như tất cả chúng ta thấy, trong những trường hợp đơn thuần thực thi một lần, createElement / appendChild sẽ hiệu suất cao hơn nhưng trong trường hợp triển khai nhiều biến hóa thì innerHTML hoàn toàn có thể là lựa chọn hiệu suất cao hơn .Bạn hoàn toàn có thể kiểm tra hiệu năng của 2 cách nàyTrong đoạn mã trên, tham số tiên phong là số lần lặp mà tất cả chúng ta muốn thực thi trong mỗi vòng lặp và tham số thứ hai là kích cỡ mẫu ( tổng số vòng lặp được thực thi, sẽ được tính trung bình ). Chạy repl bằng những số khác nhau và bạn hoàn toàn có thể tự mình thấy sự độc lạ về hiệu năng .Ví dụ, ta gọi hàm test ( 1, 100 ). Như mong đợi, appendChild hoạt động giải trí hiệu suất cao hơn khi chỉ có một lần lặp trong vòng lặp. Tuy nhiên, innerHTML cũng nhanh gọn bắt kịp hiệu suất. Ta thử gọi hàm test ( 5, 100 ) và innerHTML đã thắng lợi 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ề JavaScripttại đây.

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

Chia sẻ

• Tweet

Tham khảo: Khoá học Online nền tảng lập trình cho người mới bắt đầu bằng ngôn ngữ JavaScript

Bài viết liên quan

Xem thêm:

• Đệ quy cho người mới mở màn
• 10 thủ pháp mê hoặc và hữu dụng trong JavaScript

• Top 8 JS Framework không làm bạn thất vọng năm 2021