0

I'm working on an application which shows images. When the user scrolls down, it will update the div. My method works, but it doesn't really update the div. It clears the div and adds new content to it. So, how would I update the DIV?

At the moment I'm using this line of code. It will be called when the user is at the bottom of my div

document.getElementById("myDiv").innerHTML = result + '<br /> <img src="/images/loading.gif" />';

At the top of my code I'm defining result. Result contains the current pictures the div has:

result = result + '<img src="' + data.data[i].images.normal + '" /><br /><hr />';

So, I would like "loading.gif" to be added to the div. But as you can see, it will completely remake the div (it will reload the div) which is not optimal for users with a slow internet connection.

Thanks!

Stefan R
  • 404
  • 2
  • 8
  • 30

2 Answers2

0

It clears the div and adds new content to it. So, how would I update the DIV?

You mean you don't want to erase the contents of myDiv and add more content to it?

document.getElementById("myDiv").innerHTML += result + '<br /> <img src="/images/loading.gif" />';

If you're worried about the overhead of parsing the innerHTML back to DOM each time innerHTML is updated, append HtmlImageElement objects to the div. 

var myDiv = document.getElementById('myDiv');
myDiv.appendChild(imageObj);

This way, the existing myDiv content doesn't have to be parsed and re-rendered.

var imgUrl = '/images/loading.gif';
var img = document.createElement('img');
img.src = imgUrl;
myDiv.appendChild(img);

Advantages of createElement over innerHTML?

You can transform your innerHTML-based approach to appendChild using:

result = result + '<img src="' + data.data[i].images.normal + '" /><br /><hr />';

var imgSrc = data.data[i].images.normal; //url of the image
var img = document.createElement('img');
img.src = imgSrc;
var br = document.createElement('br');
var hr = document.createElement('hr');

myDiv.appendChild(img);
myDiv.appendChild(br);
myDiv.appendChild(hr);
Community
  • 1
  • 1
c.P.u1
  • 16,664
  • 6
  • 46
  • 41
  • Thanks for your help. However, is the first line of code you sent (document.getElementById("myDiv").innerHTML += result + '
    ';) re-creating the div? Or is it just adding content to the div? I'm asking this because I tried it, and it looked like (looked like, I could be wrong) the whole div was reloading. Your second piece of code (appendChild), how would I add HTML code with it?     – Stefan R Jul 03 '13 at 09:26
  • The first part – innerHTML – will append to the div causing the div's content to be re-parsed and re-created. For the second part, you'll have to use `createElement`, set properties and append it to myDiv using `appendChild`. – c.P.u1 Jul 03 '13 at 09:39
  • Ain't I supposed to use "createTextNode" to fill the element? This means I cannot use HTML code, right? – Stefan R Jul 03 '13 at 10:03
  • Yes, for text content. No HTML string and innerHTML when using the second approach. – c.P.u1 Jul 03 '13 at 10:07
  • Thank you for helping, once again. However, something is not totally clear to me. I'm using more codes than
    and
    . The image shows up with some info below it (e.g. '

    This image has ' + data.data[i].votes 'votes

     – Stefan R Jul 04 '13 at 12:33
  • Same as you would do for br and hr. Something like: `var p = document.createElement('p'); p.innerHTML = "This image has ' + data.data[i].votes + ' votes"; myDiv.appendChild(p);` Any HTML tag-name can be passed in to document.createElement(). The properties of the object returned by createElement() is, in most cases, the same as the attributes of the HTML tag. The order in which you append the HTML elements must be same as they would appear in an HTML markup. – c.P.u1 Jul 04 '13 at 12:43
  • Thank you once again. I Will work this out later, but you definitely helped me out! – Stefan R Jul 04 '13 at 20:54
0

Cache the div and append to it.

var div = document.getElementById('myDiv'); 
div.innerHTML = div.innerHTML + result +'<br /> <img src="/images/loading.gif" />';
Kjartan Kristjánsson
  • 3
  • 3