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: 183

Filed under:
|

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

Related posts about JavaScript

Related posts about dom