Agregando nuevos elementos al DOM usando JavaScript (appendChild)

Question

A veces necesito agregar elementos (como un nuevo enlace e imagen) a una página HTML existente, pero solo tengo acceso a una pequeña porción de la página lejos de donde Necesito insertar elementos. Quiero usar técnicas de JavaScript basadas en DOM, y debo evitar el uso de document.write().

Hasta ahora, he estado usando algo como esto:

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

¿Hay una manera más eficiente que podría utilizar para llevar a cabo la misma cosa? Todo parece necesario, pero me gustaría saber si hay una forma mejor de hacerlo.

Answer 1

Hay una manera más eficiente, y parece ser el uso de documentFragments si es posible. Échale un vistazo: http://ejohn.org/blog/dom-documentfragments/. También de esta manera debería ser menos propenso a errores y más fácil de mantener que comenzar a mezclar enormes cadenas literales y configurarlas como innerHTML de algunos otros objetos DOM.

Answer 2

No hay nada de malo en eso. El uso de innerHTML sería marginalmente más rápido y probablemente menos caracteres pero no perceptible para algo de esta escala, y mi preferencia personal es para los métodos y propiedades de DOM más estándar, con soporte uniforme y más seguros.

Una cosa sin importancia: los height y width propiedades de <img> elementos deben ser números en lugar de cadenas.

Answer 3

Si no agrega muchas cosas, la forma en que lo ha estado haciendo es ideal versus innerHTML. Sin embargo, si lo hace con frecuencia, puede crear una función/un objeto genérico que tome la información pertinente como parámetros y el trabajo sucio. IE

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

hago esto a menudo en mis propios proyectos utilizando prototipos para ahorrar tiempo.

Answer 4

Sólo tenga cuidado, innerHTML es a la vez no estándar y notoriamente buggy.