Adding new elements into DOM using JavaScript (appendChild)

Question

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.

mati · Accepted Answer · 2010-06-03 03:33:44Z

13

There is a more efficient way, and seems to be using documentFragments if possible. Check it out: http://ejohn.org/blog/dom-documentfragments/ . Also this way should be less error prone and more maintainable than starting to mix up huge strings literals and setting them as innerHTML of some other DOM objects.

answered Jun 3, 2010 at 3:33

mati

5,3483 gold badges36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KatieK Over a year ago

Thanks! I'll check this out for my next project.

dplass · Accepted Answer · 2010-06-03 01:53:23Z

6

Just beware, that innerHTML is both non-standard and notoriously buggy.

answered Jun 3, 2010 at 1:53

dplass

1,48310 silver badges20 bronze badges

1 Comment

Camilo Martin Over a year ago

Wow, I didn't knew innerHTML was buggy! Thanks for the heads-up.

Tim Down · Accepted Answer · 2010-06-02 22:53:33Z

2

Nothing wrong with that. Using innerHTML would be marginally faster and probably fewer characters but not noticeable for something of this scale, and my personal preference is for the more standard, uniformly supported and safer DOM methods and properties.

One minor point: the height and width properties of <img> elements should be numbers rather than strings.

edited Jun 2, 2010 at 22:53

answered Jun 2, 2010 at 22:48

Tim Down

326k76 gold badges461 silver badges546 bronze badges

1 Comment

KatieK Over a year ago

Thanks for the tip about height and width. That makes perfect sense.

edl · Accepted Answer · 2010-06-02 23:07:33Z

1

If you're not adding many things, the way you've been doing it is ideal vs innerHTML. If you're doing it frequently though, you might just create a generic function/object that takes the pertinent information as parameters and does the dirty work. IE

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

I do this often in my own projects using prototyping to save time.

answered Jun 2, 2010 at 23:07

edl

3,22424 silver badges23 bronze badges

Collectives™ on Stack Overflow

Adding new elements into DOM using JavaScript (appendChild)

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related