Question

This is probably very basic but I’m stalling …

On page load, I need to save the html content of my element into a variable. I have other code in the page that will change the html content of the element. So I need to be able to revert the value back to it’s default (what it was on page load). The issue is that my variable’s value is being changed to most recent value.

How can I make the initial value I assign to the variable “stick”?

currentElementsHTML = $("#myDOMElement"),
currentElementsHTMLDefaultValue = currentElementsHTML.html()
... do stuff that changes currentElementsHTML 
... revert to currentElementsHTMLDefaultValue whenever i need to

Answer 1

There are many ways you can store some data and make it available later, some of these require a knowledge of the way JavaScript’s scope works – others just rely on jQuery methods.

the first things that come to mind

global variable

The bad way to do this would be to store the value as a global var:

function at_the_start(){
   /// notice there is no var keyword, this means the variable will be global
   global_html = $('element').html();
}

function later_on(){
   $('element').html( global_html );
}

You shouldn’t do this because your data will “pollute the global namespace” – which basically means that other code will easily be able to access your variable (and mess around with it) and that you could inadvertantly overwrite some other code’s global data – especially if you use a rather general variable name.

local variable kept in scope

A better way to do this would be to use the power of JavaScript for your own ends, namely its scope abilities, there are some good points to read here — What is the scope of variables in JavaScript?:

function my_code(){

  var html = $('element').html();

  /* Do stuff here */

  $('element').html( html );

}

The above relies on a local variable and the fact that you must keep everything in the same function call. As it is most likely you will be relying on a mixture of user triggered events, you can’t really use the above. This is because you will have many functions used in different locations and they can’t all share the same local variable. Or can they?

The following is what I call a “global local” variable – completely most likely not its real name, but it describes things as I see them:

function my_code(){

  /// this variable is local, due to the var keyword
  /// but it will be accessible in both the functions below
  var html_local = '';

  var my_function_to_start = function(){
    html_local = $('element').html();
  }

  var after_other_things_have_happened = function(){
    $('element').html( html_local );
  }

  /// you can even apply these functions to say an event handler
  /// and the variable will be remembered because it exists within
  /// the "after_other_things_have_happened" function's scope.
  $('another.element').click(after_other_things_have_happened);

}

The above works because JavaScript functions can always access variables defined in previous parent blocks / parent scopes or parent functions.

jQuery data

Considering you are using jQuery, jQuery offers a very simple method for storing arbitrary data and you don’t need to know anything about scope or local and global vars. It’s taken me a while to write this and so obviously by this time other posters have correctly stated that the following is a good idea – jQuery Data:

$('element').data( 'old_html', $('element').html() );

This can then be accessed any time after by using:

$('element').data( 'old_html' );

So…

$('element').html( $('element').data( 'old_html' ) );

Will put the value back – this is stored along with the element so whereever you can access $('element') you’ll be able to get at the data assigned to it.

Some other less relevant ways (but still methods of data storage)

storing as a property of an object

Another useful ability sometimes, is that JavaScript treats nearly every datatype as an object. This means you can add properties to nearly anything. The following is actually quite possible if a little odd.

var a = new String('This is a string');
    a.withAProperty = 'another string';

alert(a);
alert(a.withAProperty);

I occasionally use this to create pseudo static properties on functions, like so:

var my_function = function(){
  if ( ! my_function.staticProp ) {
    my_function.staticProp = 'abc';
  }
  /* use my_function.staticProp for something here */
}

var another_function(){
  /* you can also access my_function.staticProp here
     but only after my_function has been called once */
}

/* and my_function.staticProp here, but only 
   after my_function has been called once  */

This almost has the same affect of using a global var (especially if you apply it to global functions) but means your value is stored on top of your functions namespace, cutting down the possibility of collisions with other code quite drastically. It does still mean outside code can influence the content of your var — which can actually be a benefit depending on what you want to do.

storing content in the dom

Depending on what you wish to store, it can sometimes be of benefit to record that data in the DOM. The most obvious of these would be to write the data into a hidden input or hidden element. The benefit of the latter is that you can still navigate this data (using the likes of jQuery or document.getElementById) if it happens to take the form of markup information (as yours does). This can also be beneficial way of avoiding memory leaks caused by circular references – if you are dealing with large amounts of data – as long as you make sure to empty your variables involved in the transporting of the data.

$.ajax('request_html.php').done(function(data){
  $('<div id="hidden_html" />').hide().html(data).appendTo('body');
  data = null;
  /// you only need mullify data if you were to have other
  /// sub/child functions within this callback, mainly being wary
  /// of closures - which are functions that are defined in a certain
  /// scope chain, but are then returned or put to use outside of
  /// that chain - i.e. like event listeners. 
  /// nullify vars and removing large properties is still good practice though.
});

Then when you want to retrieve:

$('#hidden_html').html();

And in the meantime between those two points you can obviously still traverse the data:

$('#hidden_html h1 > a[name=first]');