Thêm các phần tử mới vào DOM bằng JavaScript (appendChild)

Question

Đôi khi tôi cần phải thêm các phần tử (chẳng hạn như liên kết và hình ảnh mới) vào trang HTML hiện tại, nhưng tôi chỉ có quyền truy cập vào một phần nhỏ của trang. cần chèn các phần tử. Tôi muốn sử dụng các kỹ thuật JavaScript dựa trên DOM và tôi phải tránh sử dụng document.write().

Như vậy đến nay, tôi đã sử dụng một cái gì đó như thế này:

// Create new image element 
var newImg = document.createElement("img"); 
    newImg.src = "images/button.jpg"; 
    newImg.height = "50"; 
    newImg.width = "150"; 
    newImg.alt = "Click Me"; 
// Create new link element 
var newLink = document.createElement("a"); 
    newLink.href = "/dir/signup.html"; 
// Append new image into new link 
newLink.appendChild(newImg); 
// Append new link (with image) into its destination on the page 
document.getElementById("newLinkDestination").appendChild(newLink); 

Có cách nào hiệu quả hơn mà tôi có thể sử dụng để thực hiện điều tương tự? Tất cả đều có vẻ cần thiết, nhưng tôi muốn biết nếu có cách nào tốt hơn tôi có thể làm điều này.

Answer 1

Có cách hiệu quả hơn và dường như đang sử dụng documentFragments nếu có thể. Hãy khám phá: http://ejohn.org/blog/dom-documentfragments/. Ngoài ra theo cách này nên ít bị lỗi và dễ bảo trì hơn là bắt đầu trộn các chuỗi ký tự lớn và đặt chúng làm innerHTML của một số đối tượng DOM khác.

Answer 2

Không có gì sai với điều đó. Việc sử dụng innerHTML sẽ nhanh hơn và có thể ít ký tự hơn nhưng không đáng chú ý cho một thứ gì đó ở quy mô này và sở thích cá nhân của tôi là các phương thức và thuộc tính DOM chuẩn, được hỗ trợ thống nhất và an toàn hơn.

Một điểm nhỏ: các thuộc tính height và width thuộc tính <img> các phần tử phải là số thay vì chuỗi.

Answer 3

Nếu bạn không thêm nhiều thứ, cách bạn đã làm là lý tưởng vs innerHTML. Nếu bạn thường xuyên làm điều đó, bạn có thể chỉ cần tạo một hàm/đối tượng chung để lấy thông tin thích hợp làm tham số và thực hiện công việc dơ bẩn. IE

function addImage(src,width,height,alt,appendElem,href) {...} 

Tôi thường làm điều này trong các dự án của riêng mình bằng cách tạo mẫu để tiết kiệm thời gian.

Answer 4

Chỉ cần cẩn thận, rằng innerHTML là cả hai tiêu chuẩn và không nổi tiếng buggy.