Refreshing? Are you using a button (in a form, thanks RobG) with type of "submit" or a link to add the DIVs? If so you can return false in the function you are calling to append the DIVs.
<button onclick="return foo()">The Button</button>
/*all the work*/
return false; //No matter what, return false so you don't get a page reload.
Edit: It looks like you're using a link. There are a few ways we could go about this:
You could change the href to "#" (called an anchor in HTML).
This does not send you to a different page when you click it, but there are two caveats:
Always scrolls to the top of the page, or to whatever section you specified (e.g. #foo will scroll to the element with either an id or name of "foo". This can be annoying for users.
You could specify the action in the <a> tag's declaration to take, e.g.
<a href="foo.html" onclick="foo(); return false;">Foo</a>
<!---The above "onclick" could also just be a function that always returns false-->
Event - Something that happens while a user is browsing a web page. This can be a click, the mouse moving, the window resizing, etc.
Event Handler - A function that responds to an event happening.
<a href="foo.html" id="foo">Foo</a>
Here, we changed the a tag by:
Adding an ID, making the element easily distinguishable from any other link (and any other element for that matter) we might be using on the page.
/* stuff we want to do to our div */
return false; /* prevent page refresh */
var theLink = document.getElementById('foo');
/* Set up our link to call the method 'foo', but ONLY when it is clicked on.
* element.onclick changes the "onclick" attribute of the element */
theLink.onclick = foo;
addEventToLink(); //finally, call the method so our event listener is added to our link
Please note using element.onclick you may only set one event handler per element. This is based on the DOM Level 0 Events specification. If you want to add more than one event handler per element, view the breakdown of functions for both Internet Explorer and more standards-compliant browsers such as Firefox and Chrome at Wikipedia.
The only case where a button will cause a re-load by default is if it's a submit button in a form. In that case, it is much better to use a submit listener on the form and do the work there (including cancelling form submission if appropriate).
@RobG <button>Button</button> does reload the page... jsfiddle.net/J2NDL/1/show ... but that's only because it's a submit button by default. I see.
@imeVidas - yes, a button is by default a submit button, however it will only cause a page refresh if it's in a form and causes it to be submitted. And it can be given a type button so that it won't submit the form either.
It's a link that adds it
@enjikaka I'm not sure if Stack Overflow alerts on edits, but I hope my explanation helps.