Kathirvel K

How to load another HTML page into DIV using JS

Posted on: December 11, 2009

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;


Tags: ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: