Moving the contents of a div to the bottom of code - css

Question

On the website I am currently working on I have a div that loads slowly causing the page to load slowly but also jump as not all the positions elements load until after this slow div does. I cannot control the contents of this div as the content from the div comes from an external source.
So I was wondering if I could move the contents of this div to the bottom of my code so that it loads after the rest of my page whilst still keeping the position of the content on the same place on the webpage? Similar to what people do with some java script code.

Answer 1

Like Sergey said do something like this
javascript in the head
window.onLoad = function() { switchDivs(); }
HTML above where you want the content
<div id="whereYouWantIt"></div>
More HTML for the rest of your page
<div id="contentIsInHere"></div>
javascript here for function that switches the content around. Optionally call an external script here that contains this function.
<script>
function switchDivs() {
document.getElementById("whereYouWantIt").innerHTML = document.getElementById("contentIsInHere").innerHTML;
document.getElementById("contentIsInHere").innerHTML = "";
document.getElementById("whereYouWantIt").style.display = "inline";
}
</script>
</body>
CSS
#whereYouWantIt {
display:none;
other styles ...
}
#contentIsInHere {
display:none;
no other styles needed
}

Answer 2

You can use CSS to position the div and have it in the end. Or javascript is actually is good idea, load the content in a window.onload() function.

Answer 3

You can locate 2 divs - one where it should be and second in the bottom of page. Both of elements should have initially display none. After page will be loaded copy inner content of "pseudo" div by using JavaScript to the div you needed and make display block for this.