JavaScript in-place document updates
written by Craig, 12 July 2007
One of our most popular web products is AutoDirector. It’s a PHP application that allows you to put a JavaScript-operated car showroom on any web page with one line of code. The original system was developed in mid-2003 and used syndication/AJAX technology before they were invented!
The AutoDirector widget code is something like:
<div id="autodirector"></div>
<script type=”text/javascript” src=”carlist.php?site=myshowroom”></script>
The JavaScript uses innerHTML to add HTML into the “autodirector” element. It works well, but I’ve always felt it could be better.
A brilliant article at SitePoint describes the issues and a solution that’s so obvious, I’m not aware of anyone using it before!
In effect, it proposes that you identify the calling <script> element, then use it as a reference in an insertBefore to inject HTML nodes into the DOM. It’s simple, effective, and clean. It means that the AutoDirector showroom widget code can be even shorter and avoid innerHTML as well as document.write.
- categories: javascript
- trackback: http://www.optimalworks.net/blog/2007/web-development/javascript/javascript-in-place-updates/trackback
- bookmark: del.icio.us, digg, facebook, reddit, Furl, Spurl, Blinklist, Slashdot, Technorati, Yahoo!