The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Dynamic Elements: createElement or innerHTML?

I added an AJAX search feature to my website. It works similar to the new windows vista start menu search shortcut feature.

What happens is the user requests a keyword search, the request is sent to a PHP script which sends it back to the browser. This is all done with xmlhttp, thus AJAX.

Currently I have a script where it creates the new sets of links for each result. Therefore when PHP script returns 200 linking results, then there will be 200 <a> elements (which will link to their corresponding page). What happens which each link is that the Javascript creates a new A (link) element, sets its attributes, and appends it to the parent.

However, instead of having to create so many elements, one solution would be to change the innerHTML of the parent element. So each time the results are fetched, then the innerHTML would simply be <a href="?link1">link1</a> <a href="?link2">link2</a> and so on...

So which method should be used here? Both work, only I don't think that the innerHTML solution is correct and the createElement method is too slow...

using innerHTML isn't necessarily "correct" or "incorrect". innerHTML works - it's just not "standard". The nice thing is that any browser that supports document.createElement will also support innerHTML. However there is spotty support for *where* you can use innerHTML (IE gets buggy when messing with tables, for example).

My recommendation is to do what works best for you. I prefer to use innerHTML because it's faster for me. However, there have been instances where I've used document.createElement - but typically that's been when I've only had to create a small number of items.

createElement is actually quite fast.
It is the constant redrawing of the page as each new element is appended that takes time.
You can speed up the display by adding all of the new link elements to a documentFragment, and then appending the fragment in one go. Instead of 200 redraws you'll have one.

Everybody has an opinion about innerHTML- use it if you like it. It can be a quick way to accomplish some tasks, but it is never the only solution.

To get academic for a second - innerHTML is a perversion. The DOM is not text, it's nodes, and creating a nodeset as though it were text is conceptually wrong. But hey - that's such an abstract point it's irrelevant, because in the real world, no real users are actually affected.