Kathirvel K

Creating the responseHTML element

This may be a variable of type Element.

var responseHTML = document.createElement("body");

This works with Internet Explorer and Firefox, not with Opera.

Creating a permanent <div> storage tag

To store the other document inside the page, the following tag has to be included anywhere into the page:

<div style="display:none;"> </div>

The content is empty. It will be filled when the other HTML page is loaded.

The JavaScript functions

A function extracts the useful part of the content of the other page and stores it into the tag above.

function getBody(content) 
{ 
   var x = content.indexOf("<body");
   x = content.indexOf(">", x);    
   var y = content.lastIndexOf("</body>"); 
   return content.slice(x + 1, y);
}

Another function fills the container, either a variable or a tag, and is used as callback by Ajax.

function getContent(content, target)
{
   target.innerHTML =  getBody(content);
}

Displaying the other page

Once the content of the other page stored into the invisible <div> tag, it may be processed and extracted with DOM methods and used into the current page. In this first example it is just copied into the page.

The following tag is used to display the other page:

<div> </div>

To put the data into the page and make it visible to readers, the content is stored into this <div> tag, with the “displayed” id (or the id of your choice), with the following statement:

document.getElementById("displayed").innerHTML = responseHTML.innerHTML;

http://www.xul.fr/ajax/responseHTML-attribute.html