JavaScript: Thêm trẻ em vào phần tử

Question

Kỹ thuật nào dưới đây tốt hơn từ trải nghiệm người dùng?

Trong cả hai ví dụ, giả sử rằng thumbContainer được đặt thành giá trị trả lại là document.getElementById('thumbContainer') và new Thumbnail(thumb).toXMLString() trả về một chuỗi có đánh dấu XHTML trong đó.

A) Đơn giản chỉ cần += với thumbContainer.innerHTML:

for (thumb in thumbnails) { 
    thumbContainer.innerHTML += new Thumbnail(thumb).toXMLString(); 
} 

B) Hoặc chuyển đổi new Thumbnail(thumb).toXMLString() đến các yếu tố DOM và sử dụng appendChild?

for (thumb in thumbnails) { 
    var shell = document.createElement('div'); 
    shell.innerHTML = new Thumbnail(thumb).toXMLString(); 
    for (i = 0; i < shell.childElementCount; i++) { 
     thumbContainer.appendChild(shell.children[i]); 
    } 
} 

Tôi đã sử dụng cả hai và nhận được khiếu nại từ Firefox rằng tôi có tập lệnh chạy dài và tôi có muốn dừng không?

Vòng lặp nào ít chặt chẽ hơn, điều này sẽ cho phép giao diện người dùng cập nhật khi các phần tử mới được thêm vào DOM?

Answer 1

Cá nhân tôi thích phương pháp thứ hai (sử dụng appendChild) tốt hơn, bởi vì, bạn đang thêm phần tử mới vào cây tài liệu mà không ảnh hưởng đến các phần tử cũ.

Khi sử dụng innerHTML + = nội dung mới, bạn ảnh hưởng đến nội dung cũ, vì tất cả HTML phải được gán lại (thay thế bằng HTML mới chứa mã cũ và một số mã mới).

Nhưng, nếu bạn muốn tăng hiệu suất, tôi khuyên bạn nên sử dụng DocumentFragments. Sử dụng chúng, bạn có thể nối thêm toàn bộ các nút chỉ với một cuộc gọi appendChild trên cây tài liệu. Giá trị đọc: "DOM DocumentFragments" by John Resig, nhưng nó không phải là trường hợp trong vấn đề của bạn, bởi vì bạn nhận được nội dung như một chuỗi, mà trước tiên bạn phải chuyển đổi sang các nút DOM.

đề nghị thứ hai của tôi là, để tạo ra một chuỗi các mã HTML và sau đó sử dụng innerHTML trên một container tạm thời để chuyển nó sang DOM các nút

var htmlCode = ""; 
for (thumb in thumbnails) { 
    htmlCode += new Thumbnail(thumb).toXMLString(); 
} 
var element = document.createElement(htmlCode); 
element.innerHTML = htmlCode; // ... and append all the elements to document, or thumbContainer.innerHTML += htmlCode; 

Answer 2

A) Đơn giản chỉ cần + = với thumbContainer.innerHTML

Không bao giờ làm điều này. Điều này phải serialize tất cả các nội dung để HTML, thêm một chuỗi vào nó, và phân tích nó tất cả trở lại. Nó chậm (làm nó trong một vòng lặp đặc biệt là tin xấu) và nó sẽ mất tất cả các tài liệu tham khảo JavaScript, xử lý sự kiện và như vậy .

IE insertAdjacentHTML sẽ làm điều này hiệu quả hơn. Nó cũng là một phần của HTML5, nhưng chưa được triển khai rộng rãi ở những nơi khác.

using appendChild?

Vâng, được rồi. Nếu bạn có một số lot của ngón tay cái, nó sẽ bắt đầu bị chậm (nhưng không tệ như việc sửa lại innerHTML mỗi lần). Tạo một DocumentFragment để chèn nhiều phần tử vào danh sách nút con chứa cùng một lúc có thể giúp trong một số trường hợp. Việc kết hợp DocumentFragment với Range có thể làm được nhiều việc hơn, nhưng sẽ khó viết hơn khi việc triển khai phạm vi của IE là StRange.

Dù bằng cách nào, vì bạn dường như không làm bất cứ điều gì với các nút vỏ cá nhân, tại sao không chỉ đơn giản là tham gia tất cả các chuỗi HTML thumbernail trước khi phân tích cú pháp?

for (var con trong shell.childNodes) {

Không sử dụng trên các loại for..in chuỗi, nó sẽ không làm những gì bạn nghĩ. Nó chỉ có nghĩa là để sử dụng chống lại Object được sử dụng như một bản đồ. Cách chính xác để lặp qua một mảng hoặc NodeList là đồng bằng cũ for (var i= 0; i<sequence.length; i++).