Reset the HTML content of a div with javascript

phil.d.g · 02-13-2006, 08:10 AM

How do you reset the HTML of an element back to its original content with javascript?

I'm having a bit of a play with AJAX, I have a page with a HTML form in. When the user fills out the button the javascript sends the data to a page on the server and gets the response. I have a line like this in my javascript to replace the form with data from the request's response

Code:

var element = "form";

document.getElementById(element).innerHTML = request.responseText;

The original HTML page looks like:

Code:

...
<body>
...
<div id="form">
  <form>
    <input type="text" ...
    ...
    ...
  </form>
</div>
...

And I'm trying to write a function that sets the form div back to the original content. I know I could put the original content in a variable and keep hold of that, but it doesn't seem vaery elegant seeing as the html is already in the document.

Matir · 02-13-2006, 08:53 AM

Once you set the innerHTML, as far as the page's DOM is concerned, the original HTML content is gone. AFAIK, storing the original contents in a variable is the accepted way of doing what you want.

phil.d.g · 02-13-2006, 12:20 PM

Actually, I was thinking about this driving back from uni, and concluded that this was the case, what I was originally thinking was that when you click view source in a browser you always see the original HTML, it never shows the changes that are made with javascript, so maybe I could extract the original html from that.

But perhaps, that is a snapshot taken of the page's DOM after loading it and isn't accessible via javascript?

Matir · 02-13-2006, 12:49 PM

The source of the page is downloaded and stored in memory. It is then parsed by the parser into internal structures in the browser. Javascript and rendering is then done using these internal structures. If it changed the HTML, then it would need to be re-rendered on every change. This would very much slow things down and basically just defeat the whole point of AJAX.

german · 02-13-2006, 11:47 PM

the answer to your question would be a piece of javascript something like this:

COMPLETELY UNTESTED

Code:

var oldContent; // container object for "invisible" html
function swap(el, content) {
  var element = document.getElementById(el);
  var oldcontent = element.innerHTML;
  element.innerHTML = content;
  if(!oldContent) {
    oldContent new Object();
  }
  oldContent[el] = oldcontent;
}

then, to get the original content back (and destroy the content you put in it before),

Code:

function restoreContent(el) {
  if(!oldContent) { return false; }
  document.getElementById(el).innerHTML = oldContent[el];
}

my OO javascript hasn't been exercised a lot lately, so if there are any glaring errors I apologize, but that is more or less how you would store content that is to be reused later, iirc.

B.

-- edit:

If you wanted to switch it again without destroying the content you replaced it with, you could call the function like so:

Code:

swap(el, oldContent[el]);

however this would still destroy the current contents of oldContent[el]. You could use an array for the value of oldContent[el] to store a history of the pieces of content that have been in that element, but you would have to be careful of creating a noticeable memory leak.

Also, Matir, current browsers are very good at dealing with changes to the DOM without re-rendering the entire page. Take a look at GMail for evidence. The last browser I am aware of that handled it badly was Netscape Navigator 4.7. If I misunderstood your comment I apologize, but it sounded like you were saying that changing the structure of an HTML document programmatically was bad form. This is not only incorrect, it is one of the cornerstones of how Ajax works.

phil.d.g · 02-14-2006, 02:29 AM

Thankyou,

I think my lack of knowledge of how browsers work has led to a bit of confusion on all accounts. I'll try to read up on this later, I should have started this last night but I got caught up with researching using onClick methods and innerHTML in firefox whilst using the application/xhtml+xml mime type

german, That is the sort of thing I ended up doing.

Matir, I didn't mean to change the original html text with my javascript changes, or parse and rerender the whole page.

--
I was just wondering that after the initial page has been downloaded, parsed and my has javascript mauled some of the content if I could then extract the fragment of html that has already been replaced in the DOM structure from the initial html page stored in memory, parse that bit and insert it back into the DOM tree. Rather than store the html in a variable. Does that make sense?