Optimalworks Ltd web design, SEO, training and consultancy 

the site completely surpassed my expectations GT, AutoDirector, we build websites that work, my website is great - I love it MP, XL Autos, reach more customers, make more sales, it's more than I ever could have expected LM, Trade Cars UK, we can help your business grow, 99% of business now comes from my website GV, Bash Events, promoting standards throughout the web industry, your contribution added a level of quality we would otherwise have struggled to achieve PS, Hemsley Fraser
  1. home
  2. Services
  3. Portfolio
  4. Contact us
  5. blog

innerHTML: the ultimate alternative solution

written by Craig, 19 December 2007

innerHTML allows a JavaScript developer to insert raw HTML code into the page at a specific node, e.g. node.innerHTML = “<p>some new HTML</p>”;

It’s incredibly useful and very fast, but it comes with some baggage:

  • invalid HTML can be inserted, making errors difficult to spot and debug
  • if you want to do anything complex, innerHTML will cause problems. In particular, you may not be able to examine nodes in the resulting DOM, event handlers can be removed, some elements are not supported, and browser issues will occur.
  • it’s not a part of the W3C standard. Yet. Although most browsers support innerHTML, it just feels … a little dirty.

The alternatives until now

The main alternative is to manually update the DOM using appendChild or insertBefore. It works, but it’s no fun, requires a lot of code, and is impractical for larger chunks of HTML.

I’ve seen some great ideas that use JSON-like structures or create functions for every HTML tag. It’s clever and significantly reduces the coding effort - but they’re not as easy as innerHTML.

BetterInnerHTML: the ultimate solution!

Here’s what you’ve come for - a solution that completely replaces innerHTML, allows you to specify a code string, validates your HTML, uses safe methods to update the DOM, and does it all in less than 50 lines of JavaScript.

View the BetterInnerHTML demonstration and download page…

It works by loading the HTML string as an XML document, then recursing the nodes and copying each one into the DOM. The function takes the following arguments: BetterInnerHTML(element, HTMLstring, clearfirst);

Where:

  1. element is a DOM node
  2. HTMLstring is the HTML you want to insert, and
  3. clearfirst is an optional argument - set it to false to keep the existing child nodes and append the new HTML below them

For example: BetterInnerHTML( document.getElementById(”element”), “<p>A standard <strong>HTML</strong> string.</p>” );

The advantages:

  • it’s as easy to use as innerHTML but doesn’t have the problems
  • unlike innerHTML, you do not need to destroy the existing content (set clearfirst to false).
  • invalid HTML will throw a JavaScript error or show a ‘bad XML’ message
  • it’s less than 50 lines of code - just an additional 1KB to your script library
  • it works in every mainstream browser (IE, Firefox, Opera and Safari) in HTML or XHTML pages
  • if you’re retrieving XML content via Ajax requests, there’s no need to create a new XML document - the script can be modified accordingly.

The potential pitfalls:

  • it’s slower than innerHTML for large strings or frequent inserts - but that isn’t typical in a well-devised web system
  • strictly speaking, XML manipulation methods aren’t part of the W3C standards. However, like XmlHttpRequest, they are supported by most browsers and BetterInnerHTML safely updates the DOM using the XML as a reference only.
  • it’s impossible to test all combinations of OS and browser, so let me know if you find any problems.

I still have a nagging doubt that this solution is too simple and too easy! Please leave your comments…

  • categories: javascript
  • tags: ajax, dom, download, html, javascript, standards, xml
  • trackback: http://www.optimalworks.net/blog/2007/web-development/javascript/innerhtml-alternative/trackback
  • bookmark: del.icio.us, digg, facebook, reddit, Furl, Spurl, Blinklist, Slashdot, Technorati, Yahoo!

9 comments:

  1. 19 December 2007 Jonathan Snook commented

    I like that you’re using a simple solution to validate the code before insertion. One problem is that the syntax must be XHTML. As an HTML 4.01 guy myself, that’d mean I’d have to remember to close my img tags (etc) before insertion.

  2. 19 December 2007 Craig commented

    That’s true - but the method does work in HTML 4.01 pages. Keeping the code valid should also help if you’re doing further DOM manipulation.

  3. 14 January 2008 Jordi commented

    Hi, I have used your BetterInnerHTML a couple of times and I am very happy with the result. Though, when I am using JavaScript onclick or similar, the onclick is not working in IE. It does in FF. The regular InnerHTML doesn’t give me any problems. Anyone come up with a solution for this already? Regards, Jordi

  4. 15 January 2008 Craig commented

    Thanks for spotting that, Jordi. Wouldn’t life be boring without IE problems … this code would be around half its size too!

    I’ve fixed the problem so grab the new version from the download page. The solution is fairly nasty: the code checks for “on-something” attributes, then attaches the event after the node has been added to the page. The event handler is run within an eval wrapped inside another function. Yuck.

    It works, but I probably wouldn’t recommend it for complex client-side applications. It would be safer and possibly faster to attach events to nodes after they have been added to the page (with BetterInnerHTML or any other method). If you do that, then v1.0 can be used.

  5. 15 January 2008 Jordi commented

    Thank you very much for your quick reply and solution. Regards.

  6. 6 March 2008 Chris commented

    I think I found a bug. This function removes some of my tags (and their content). I’ve only tested in in IE7 so far but I stopped at that point. I’m just wondering if anyone else had had any problems or if their are any limitations.

    The tags it removed were somewhat random. Sometimes it would remove a strong tag sometimes not. I don’t really have a better example than that.

  7. 6 March 2008 Craig commented

    I have found a bug that removes content if it’s only 2 characters, but all tags should be created if you have valid XHTML.

    I’d recommend testing in Firefox because you can view the generated source using extensions like Firebug and the WDT.

    Send me your HTML string and I’ll take a look.

  8. 1 April 2008 Holger Pandel commented

    Hi! Thank you so much for this script! It absolutely made my day when trying to get a slideshow script from dynamicdrive running in combination with Joomla 1.5! Again, many thanks!

  9. 1 April 2008 Bruno Goncalves commented

    Hi.
    In our project we added the use of BetterInnerHTML to the Struts-Layout Sugest feature.

    We had to change small bits of Struts-Layout Sugest and also added BetterInnerHTML. Everything was working fine with version 1.0.

    When we upgraded to 1.1 the events stop working properly (for IE and FF).
    In our case the solution was to re-add the use of addEventToNode().

    ps.the message box didn’t allowed my portuguese name with a c,

add your comments
please enter your name
please enter your email address - it will not be published anywhere
please enter your website address
please enter your comments (all are moderated and checked for spam)
  • next article: Optimalworks wins the Accessites.org award 
  • previous article: TACS 1.2 update - free PHP template system 
search
  • all popular (3)
  • courses (1)
  • general (1)
  • hardware (1)
  • software (21)
    • free download (4)
    • web browsers (8)
    • web servers (2)
  • web development (27)
    • accessibility (3)
    • ajax (1)
    • css (2)
    • graphic design (4)
    • javascript (5)
    • php (4)
    • seo (1)

tags

  • accessibility
  • ajax
  • apache
  • award
  • css
  • design
  • developers
  • dom
  • download
  • editor
  • firefox
  • funny
  • graphics
  • hardware
  • html
  • ie
  • javascript
  • opera
  • php
  • review
  • safari
  • seo
  • server
  • software
  • ssl
  • standards
  • wordpress
  • xml
  1. site map
  2. home
  3. Services
  4. Portfolio
  5. Contact us
  6. blog
  7. RSS feed
  8. project survey

XHTML 1.0 | CSS 2.1 | WAI AAA | printer-friendly

©2008 Optimalworks Ltd, Devon, UK. Registered in England and Wales No. 5922205.

This page can be viewed at http://www.optimalworks.net/blog/2007/web-development/javascript/innerhtml-alternative