Learn Modern JavaScript

24. Updating the Web Page

The introduction of the Document Object Model has standardised the way that JavaScript interacts with your web page. We have already seen how JavaScript can reference parts of the page using document.getElementById(), document.getElementsByTagNames(), and document.getElementsByName(). Similarly there are standard DOM commands to allow JavaScript to update the actual HTML content of the page.

The easiest update to perform is to delete something that is already on the page. This is done using the removeChild() command.

Inserting something into the page is slightly more difficult if you are going to do it properly. Before we can add something into the page we need to convert it into something that is in an appropriate format to insert into the HTML of our web page. This is done using the createElement() and createTextNode() commands which create HTML tags and text content respectively. There are also commands for creating other types of content that can be added into the page. Once these elements and text nodes are created they can be assembled together and then added to the page using the appendChild() command. You can also use createDocumentFragment() in order to create fragments of web page content that can be added all at once instead of adding the content one piece at a time. The insertBefore() command allows us to add something immediately in front of a known element instead of adding into the end of an element the way appendChild() does.

To replace content in the page we could just delete the old content and then insert the new content but the replaceChild() command allows us to do it as one step instead of two.

One special case when it comes to updating the page is tables where there are a whole range of component parts that need to be correctly assembled in order to display properly in the web page. While you can build up your table element by element there are a whole range of special DOM commands that JavaScript makes available in order to dramatically reduce the amount of code needed to create or update any tables in your web page.

What about innerHTML? You may have seen lots of pages around that use this command to do the updates to the web page instead of the DOM commands mentioned above. This command is not actually a part of the standards but all of the more commonly used browsers do support it and using it certainly involves a lot less code when you are adding large chunks of HTML into your page all in one go. One thing you do have to watch out for though is that Internet Explorer imposes a number of restrictions on what parts of the web page can be updated using this command (you can't update a part of a table for example). You may also find instances where you want multiple interactions with the page where you want to retrieve content into JavaScript that was previously added dynamically to the page where using innerHTML causes the subsequent code to not work properly in one or more browsers. You can write code that is just as unobtrusive using innerHTML as you can using the standard DOM commands and so which way that yuo choose to do your page updates really depends on just what it is that you are trying to do and how pedantic you are about following the standards.

If you are serving your web pages as XHTML instead of HTML then the DOM commands to use are slightly different since with XHTML you need to identift the namespace into which the update is to apply. The DOM commands to use for this have NS on the end of the command name and have an additional parameter to be passed to provide the command with the namespace to be updated. For example the XHTML equivalent to createElement() is createElementNS(). With XHTML you don't get an option of using innerHTML since that command does not work with XHTML.

More of This Tutorial

• 1 Introduction
• 2 Events
• 3 Visitor Triggered Events
• 4 Timed Events
• 5 Testing Conditions
• 6 Feature Sensing
• 7 Alternate Tag Location
• 8 Functions and Methods
• 9 Passing Parameters
• 10 Variables/Properties
• 11 Objects
• 12 Arrays
• 13 Nodelists
• 14 Loops
• 15 Numbers
• 16 Strings
• 17 Dates
• 18 Alert
• 19 Other Objects
• 20 Extending Objects
• 21 Creating Objects
• 22 Collision Proofing
• 23 JavaScript and Forms
• 25 Obsolete JavaScript