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 inse

Answer 1

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.

Answer 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.

Answer 3

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.

Answer 4

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