I have the following structure:
<div class="parent">
<div id="child1">Content here</div>
<div class="child2">Content here</div>
</div>
At onload, I want to include a "holder" div, that holds all the parent's children like so:
<div class="parent">
<div id="holder">
<div id="child1">Content here</div>
<div class="child2">Content here</div>
</div>
</div>
Knowing only the "child1" id, how can I add a holder div around itself and siblings?
Considerations
Thoughts?
Seeing as this has to be JavaScript (and not jQuery) and you can only indentify the child1 by id you could do something as crude as this:
var child1 = document.getElementById("child1"),
parent = child1.parentNode,
contents = parent.innerHTML ;
parent.innerHTML = '<div id="holder">' + contents + '</div>';
Hope this helps...