Adding new elements into DOM using JavaScript (appendChild)
        Posted  
        
            by KatieK
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by KatieK
        
        
        
        Published on 2010-06-02T22:42:17Z
        Indexed on 
            2010/06/02
            22:44 UTC
        
        
        Read the original article
        Hit count: 236
        
JavaScript
|dom
I sometimes need to add elements (such as a new link and image) to an existing HTML page, but I only have access to a small portion of the page far from where I need to insert elements. I want to use DOM based JavaScript techniques, and I must avoid using document.write().
Thus far, I've been using something like this:
//  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);
Is there a more efficient way that I could use to accomplish the same thing? It all seems necessary, but I'd like to know if there's a better way I could be doing this.
Thanks!
© Stack Overflow or respective owner