Hinzufügen neuer Elemente in DOM mit JavaScript (appendChild)

Question

Manchmal muss ich Elemente (wie eine neue Verknüpfung und ein Bild) zu einer vorhandenen HTML-Seite hinzufügen, aber ich habe nur Zugriff auf einen kleinen Teil der Seite von wo ich müssen Elemente einfügen. Ich möchte DOM-basierte JavaScript-Techniken verwenden, und ich muss vermeiden, document.write() zu verwenden.

Bisher habe ich so etwas wie dies bereits mit:

// 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); 

Gibt es eine effizientere Art und Weise, dass ich das Gleiche zu erreichen verwenden könnte? Es scheint alles notwendig zu sein, aber ich würde gerne wissen, ob es einen besseren Weg gibt, wie ich das machen könnte.

Answer 1

Es gibt einen effizienteren Weg und scheint, wenn möglich, documentFragments zu verwenden. Überprüfen Sie es: http://ejohn.org/blog/dom-documentfragments/. Auch sollte dieser Weg weniger fehleranfällig und wartungsfreundlicher sein, als wenn man große Strings-Literale verwechselt und sie als innerHTML einiger anderer DOM-Objekte einstellt.

Answer 2

Nichts ist falsch damit. Die Verwendung von innerHTML wäre marginal schneller und wahrscheinlich weniger Zeichen, aber nicht bemerkbar für etwas von dieser Größenordnung, und meine persönliche Präferenz ist für die mehr standardisierten, einheitlich unterstützten und sichereren DOM-Methoden und -Eigenschaften.

Ein kleiner Punkt: die height und width Eigenschaften von <img> Elemente sollten Zahlen statt Strings sein.

Answer 3

Wenn Sie nicht viele Dinge hinzufügen, ist die Art, wie Sie es gemacht haben, ideal vs. innerHTML. Wenn Sie es jedoch häufig tun, können Sie einfach eine generische Funktion/ein generisches Objekt erstellen, das die relevanten Informationen als Parameter akzeptiert und die Drecksarbeit erledigt. IE

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

Ich mache dies oft in meinen eigenen Projekten mit Prototyping, um Zeit zu sparen.

Answer 4

Passen Sie einfach auf, dass innerHTML nicht-Standard und notorisch buggy ist.