Post
Ask Question

Replace a Page With a New Markup in JavaScript

Introduction

 
This article explains how to write to the same document or replace the page with the new markup in JavaScript. 
 
In this example we use two buttons that show information about images on the same page like this:
 
image1.gif
 
Now when we click on the Penguins Button:
 
image2.gif
 
It will replace the markup with the new markup in which we will see the image and information regarding the image on the same page (One.html).
 
Now to write the code for that:
 
Step 1: First we use two Button Controls like this:
  1. <input type="button" id="btnPenguins" value="Penguins" />  
  2. <input type="button" id="btnLighthouse" value="Lighthouse" />  
Step 2: Now we use a JavaScript file (documentrewrite.js). In this file, we will write the function by which, when we click on the buttons, the markup of the page will be changed. So now we will write the code for the documentrewrite.js file:
 
First, we will create an Event Handler Like this:
  1. function Addevent(obj, eventType, func) {  
  2.      if (obj && typeof (obj) == "object") {  
  3.          if (obj.AddeventListener) {  
  4.               obj.AddeventListener(eventType, func, false);  
  5.           }  
  6.          else {  
  7.              obj["on" + eventType] = func;  
  8.          }  
  9.      }  
  10. } 
Now we will write the code for our first Button Penguins. Here we first create a function like this:
  1. function penguins() {  
  2.       var x = '<!DOCTYPE html>';  
  3.       x += '<html>';  
  4.       x += '<head>';  
  5.       x += '<meta http-equiv="content-type" content="text/html;charset=utf-8">';  
  6.       x += '<title>Penguins</title>';  
  7.       x += '<style type="text/css">';  
  8.       x += 'body { background-color: Tan; }';  
  9.       x += '</style>';  
  10.       x += '</head>';  
  11.       x += '<body>';  
  12.       x += '<h1>These penguins are an elite strike force with unmatched commando skills.</h1>';  
  13.       x += '<img src="Penguins.jpg" width="350" height="350" />';  
  14.       x += '<br />';  
  15.       x += '<a href="One.html">Back</a>';  
  16.       x += '</body>';  
  17.       x += '</html>';  
  18.       document.write(x);  
  19.       document.close();  
  20. } 
This function replaces the markup of the page. Here we use the document. write a method to write the previous markup for the new window.
 
Now we will write the following code to apply the changes when the page is loaded:
  1. function initialize() {  
  2.     if (document.getElementById) {  
  3.         var ButtonPenguins = document.getElementById('btnPenguins');  
  4.         if (ButtonPenguins) {  
  5.             Addevent(ButtonPenguins, 'click', penguins);  
  6.         }  
  7.     }  
  8. } 
Here we use a variable ButtonPenguins that represents the Penguins Button in our HTML page.
  1. var ButtonPenguins = document.getElementById('btnPenguins'); 
After that we will check whether the button exists and if it exists then we add an EventHandler for that:
  1. if (ButtonPenguins) {  
  2.         Addevent(ButtonPenguins, 'click', penguins);  
  3. }  
  4. Addevent(window, 'load', initialize); 
Here we add the click event or assign the penguins function to that event so when we click on the Penguins Button in the HTML Page (One.html), the page markup will be replaced with the penguins() function markup like this:
 
image3.gif
 
image4.gif
 
Now we will write the same code for the Lighthouse Button like this:
  1. function lighthouse() {   
  2.         var x = '<!DOCTYPE html>';  
  3.         x += '<html>';  
  4.         x += '<head>';  
  5.         x += '<meta http-equiv="content-type" content="text/html;charset=utf-8">';  
  6.         x += '<title>Lighthouse</title>';  
  7.         x += '<style type="text/css">';  
  8.         x += 'body { background-color: Gray; }';  
  9.         x += '</style>';  
  10.         x += '</head>';  
  11.         x += '<body>';  
  12.         x += '<h1>A lighthouse is a tower, building, or other type of structure designed to emit light from a system of lamps and lenses.</h1>';  
  13.         x += '<img src="Lighthouse.jpg" width="350" height="350" />';  
  14.         x += '<br />';  
  15.         x += '<a href="One.html">Back</a>';  
  16.         x += '</body>';  
  17.         x += '</html>';    
  18.         document.write(x);    
  19.         document.close();  
  20.     }   
  21.     function initialize() {   
  22.         if (document.getElementById) {   
  23.             var ButtonPenguins = document.getElementById('btnPenguins');  
  24.             var ButtonLighthouse = document.getElementById('btnLighthouse');   
  25.             if (ButtonPenguins) {   
  26.                 Addevent(ButtonPenguins, 'click', penguins);  
  27.             }  
  28.             if (ButtonLighthouse) {   
  29.                 Addevent(ButtonLighthouse, 'click', lighthouse);  
  30.             }  
  31.         }  
  32.     }  
  33. Addevent(window, 'load', initialize); 
When we click on the Lighthouse button in the HTML page the new markup of the page will be visible like this:
 
image5.gif


Similar Articles