I have two divs on my website. They both share the same css properties, but one of them holds 24 other divs. I want all of these 24 divs to be copied into the other div. This is how it looks like:
<div id="mydiv1">
<div id="div1">
</div>
</div id="div2>
</div>
//and all the way up to div 24.
</div>
<div id="mydiv2">
</div>
I want all of the 24 divs within mydiv1 to be copied into mydiv2 when the page loads.
Thanks in advance
See Question&Answers more detail:os
Firstly we are assigning divs into variables (optional)
var firstDivContent = document.getElementById('mydiv1');
var secondDivContent = document.getElementById('mydiv2');
Now just assign mydiv1's content to mydiv2.
secondDivContent.innerHTML = firstDivContent.innerHTML;
DEMO http://jsfiddle.net/GCn8j/
COMPLETE CODE
<html>
<head>
<script type="text/javascript">
function copyDiv(){
var firstDivContent = document.getElementById('mydiv1');
var secondDivContent = document.getElementById('mydiv2');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
</script>
</head>
<body onload="copyDiv();">
<div id="mydiv1">
<div id="div1">
</div>
<div id="div2">
</div>
</div>
<div id="mydiv2">
</div>
</body>
</html>
