Quite often what developers want to do is dynamically replace or append/insert HTML snippets into an existing Web Page. For example, this situation occurs all the time when using tables. Or with widgets that expand a headline into a headline+paragraph text [and then with a click hides it]. This article describes a fairly simple JavaScript function, changeHTML(), that can be used with tables [or any other legitimate HTML snippet] and allows a developer to precisely replace or insert above or append below with their new HTML code.

The routine takes two or three arguments. When there is only two argments the routine defaults to appending below with the new HTML snippet.

Presto click to Vanish!

---

All of this snippet of code will completely disappear through the magic of

JavaScript Code

What has happened to static HTML and CSS????

append insert replace Choose change option
Example of HTML Table

This table is laid out using a <table> tag as seen to the immediate right Click to insert a new HTML table row

<!--The original empty table layout: --> <table width="750" border="1" id="adder" > <tr > <td width=40% > </td> <td></td> </tr> </table>

Example of CSS-based Table

The routine changeHTML() is used to do most of the work here.And changeHTML uses the DOM innerHTML property extensively. In our demo examples, we add a row to the HTML-based TABLE by passing a snippet of the correct table row HTML [using TR and TD tags of course]. In the second example, the HTML is drawn directly from the Web page. A snippet of code is contained within a DIV block that has a style="display:none;" styling which makes the DIV block hidden. innerHTML in turn is all the HTML contained within an HTML element, in our case the hidden DIV block. Thus in the second demo example, the CSS-Based Tables has rows added by passing the tag ID='hidden' which identifies the hidden block.

Here is what and how arguments are passed to changeHTML:
changeHTM(sniphtml, target, appending);
sniphtml = the snippet of HTML that is to be added or replaced.It can can be a string of actual HTML or it can be ID of a HTML block [almost always hidden] on the Web page;
target = the ID of the target HTML block where the code will be appended before, inserted after, or replace any existing HTML code, the so called innerHTML;
appending = a switch that tells what do with the snippet of HTML
   appending = 'append'= 1 means append the snippet below the target's innerHTML
   appending = 'insert' = 2 means insert the snippet above the target's innerHTML
   appending = 'replace' = 3 means replace the target's innerHTML with the new snippet

As can be seen from our examples, the change HTML works reasonably well. The biggest problem is with passing complex strings that require 2 different quotes themselves. In this case users will have to use the ID of a hidden HTML block. The coding can be tricky because users of the routine a)must place unique ID= identifiers in the target HTML tags and b)use natural trigger events like the buttons in our second demo.

In doing Web 2.0 and AJAX development, there is a lot of emphasis on using widgets and constructing clever XHR requests. And of course using these tools certainly adds style and functionality to your Web designs. However, I have found myself spending much more time doing three or four simple tasks:
1)dynamically changing the styling of a webpage based on what and how the users is interacting with the page. Many times nothing is done; but sometimes being able to reveal or emphasize some HTML is critical to a design;
2)dynamically changing the contents of a page - often images and chucnks of HTML. This is what this routine is good at doing;
3)dynamically moving or changing a page overtime. Automatic scrollers and carousels come to mind but their is a whole rich world around time intervals; 4)validating that data enetered or changed in a grid or form is correct. Our routine on dynamic CSS styling addresses (1), this routine helps with task (2), and hopefully I shall have some more tutorials available for (3) and (4).

This routine tests the MooTools Accordion Widget which is being checked for stability when used with challenging DOM-based JavaScripts. So far we have not seen any problems adding several different chunks of JavaScript code. Here is the assessment so far;
Whats HOT!!
1)when no JavaScript is available the Accordion expands out into readable sections;
2)the Accordion initially adapts to the height of each panel block;
3)Users can style the text in each accordion header.
Whats NOT!
1)the complete Accordion cannot be collapsed down;
2)Some really bizarre behavior when the DIVs [or other tags] are not balanced;
3)the Accordion does not adapt to changing blocks - add a dozen or so rows to either table in our demo and note what happens. After reaching a maximum height the panels rows disappear from view. Users must close the panel and re-open it to see all the new, added content. Sometimes this does not matter; but in appending images or chunks of data this is a real inconvenience.