adding images dynamically jquery

Try using .html() instead of append.

So it would be something like this:

var img = '<img src="image.jpg" width="300" height="300">';

$('.figuredisplay').html(img);

Hope it helps.

show_figure= function(figrlocation){
  $('.figuredisplay').empty();
  var figrhtmlcode='<img src="' + figrlocation + '" width="300" height="300">';
  $('.figuredisplay').append(figrhtmlcode);
 }

This code should work. Are you sure that figrlocation is not undefined. Check your console for errors.

I will be using jQuery, find it here: http://jquery.com/download/
I accomplish this by cycling through images in a folder all named pic (ex. pic1.jpg , pic2.jpg , pic3.jpg , etc...)

How I have done this in the past was by simply adding two functions to the images.
The first being onLoad

• This will let us call our function to add the next image

The second being onError

• This will let us call our function to stop loading images (because we have run out of them)

To start, here are the variables that we will use:

var preSrc = "/images/pic";     // This gives the first part of the path to the images
var n = 1;                     // This will be which image we are on (denoted by #)
var fileType = ".jpg";        // The file type for your images

// Now put it all together 

var imgSrc = preSrc + n + fileType; // This is the full source for your images

// Now add the rest of the html to be appended

var img = '<img src="' + imgSrc + '" onLoad="nextImg(' + n + ');" onError="stopLoad(this);" />';

So what is happening here?
We the first few variables are rather self explanatory, we are just creating the source of our images. The last variable here is a bit more difficult though. We are creating a variable called img that will hold the actual html tag that will be added to the document. It also holds data for what the current image is(n).

It also has two attributes to it that I would like to talk about.
The first being the onLoad function:

• Here we call a function named nextImg. We will create this funciton in a moment, but for now just know that it will ready and publish the next image in our folder to the page.

The second being the onError function:

• Here we call a function named onError. This is definitely not the best way to stop loading the images, but it is the only one that I personally have found that can work with plain javascript. Again, we will create this is a moment, so just know that this will stop loading the images when we run out of them.

Now that we have our the sources for our images taken care of, we need to write the functions that will add our images to the page. This function can be called in a few different ways, but I will stick to one right now.

//When the document is loaded, this function will be called

$(document).ready(function() {
    //Create the variables in this function so we can use them
    var preSrc = "/images/pic";
    var n = 1;
    var fileType = ".jpg";

    var imgSrc = preSrc + n + fileType;

    var img = '<img src="' + imgSrc + '" onLoad="nextImg(' + n + ');" onError="stopLoad(this);" />';

    $('#imgContainer').append(img); // Here we use jQuery to append our image to a container with the id of "imgContainer" (This can of course be changed)
});

So now that our first image is being loaded when the page is ready, we can create our "onLoad" function:

// Here we create our "nextImg" function and create the variable called "currentImg" which will tell us what image was just loaded on the page  
function nextImg(currentImg) {

    //Create the variables in this function so we can use them
    var preSrc = "/images/pic";
    var n = currentImg++; // We add 1 to the current image number so that we can publish the next image in the folder to our page
    var fileType = ".jpg";

    var imgSrc = preSrc + n + fileType;

    var img = '<img src="' + imgSrc + '" onLoad="nextImg(' + n + ');" onError="stopLoad(this);" />';

    $('#imgContainer').append(img); // Now that we have incremented our image number, this statement will now add the next image in our folder to the page.
}

Two down, one to go!
Now let's start work on our last function, onError.

// Here we have the same setup as the last function except for the name
function stopLoad(currentImg) { 

    // Now we simply make sure that there is no "broken image" link left on the page
    $(currentImg).css('display', 'none');
    $(currentImg).css('visibility', 'hidden');
}

Hope this helped, if you have any questions or suggestions (I am sure there are much better ways to do this), then feel free to let me know!