reload contents of div using javascript

Question

I'm trying to reload the contents of div tag on button-click. I can do it with using:

function reload_div()
{   
    document.getElementById('div_id').innerHTML = 'blah blah blah';
}

but the problem is, that div tag contains thousands of lines and when I try to acomplish the div-reloading with previous function, the browser will be freezed. I was searching for a solution on stackoverflow but all what I found is with using ajax or jquery and I haven't used those library before. So, can I reload the div contents using javascript and html only? Thanks.

score 1 · Accepted Answer · answered Aug 28 '11 at 02:51

I'm not sure why you would want to load so much content with javascript in the first place, but you could always put the javascript in an external file so the browser could cache it. That should help if it's the browser loading the script that is causing the page to freeze up.

Feel free to post more code and I'll take a look if that doesn't do it for you.

alt · Answer 2 · 2011-08-28T00:02:20.517

You can't exactly "refresh" the content I don't think, I've never heard of that. (however, I'm not an expert) However, I have heard of switching out the content with javascript, try something link this:

here's your button & div with content:

<a href="divrefresh()">Refresh it!</a>
<div id="content"><p>Some Stuff!</p></div>

Here's the js underlying, you've got a function which is used above in the link.

function divrefresh() {
     document.getElementById('content').innerHTML = "Some new stuff!"
}

ETA: Oops, I see the rest of your post now. I'm not sure why that would freeze the browser. Try jQuery, it's really easy to use, that's why everyone loves it. If you've found a jQuery solution, I wouldn't hesitate to try it out! Post it and I can help you.

If you REALLY don't want to use jQuery or Ajax, then I think the only other solution is to put the lines in their own HTML document, have an iframe, and refresh the iframe.

`document.getElementById` takes an ID, not a CSS selector that selects by ID. — icktoofay, Aug 27 '11 at 23:54

score 0 · Answer 3 · answered Aug 28 '11 at 02:52

You could try using removeChild, in a variety of ways (I'm not sure whether the following code would freeze the browser or not, but it's worth a try):

1)

function reload_div() {
    // Remove all child nodes from div first
    var div = document.getElementById('div_id');
    while (div.firstChild) {
        div.removeChild(div.firstChild);
    }

    document.getElementById('div_id').innerHTML = 'blah blah blah';
}

2)

function reload_div() {
    // Remove the div first
    var parent = document.getElementById('div_id').parentNode;
    parent.removeChild(document.getElementById('div_id'));

    // Recreate the div
    var div = document.createElement('div');
    div.setAttribute('id', 'div_id');

    // Append the div to the parent
    parent.appendChild(div);

    document.getElementById('div_id').innerHTML = 'blah blah blah';
}

no you didn't understand me, I want to reload the same contents of `div` inside the same `div` because the user changes its contents and I want to reload the `div` so that any changes will be canceld and the contents will be same as if I refresh the whole page. I don't need `blah blah blah` it's just an example. Thanks for your help anyway :) — Eng.Fouad, Aug 28 '11 at 03:17

reload contents of div using javascript

3 Answers3

Linked