Wrapping a div around the document body

Question

Hello! I am trying to dynamically wrap the contents of a document's body tag in a DIV. So far, I have used the following code:

document.body.innerHTML = '<div id="wrap">' + document.body.innerHTML + '</div>';

This works, but has the unwanted side effect that other scripts on the same page stop working (I assume because changing innerHTML renders any object references they may have held useless).

What would be the best/most efficient way to achieve this and keep the references intact, using pure Javascript or the Prototype framework?

Thanks in advance!

Answer 1

you could try this? (untested)

var newDiv = document.createElement('div')
newDiv.setAttribute('id','wrap');
var bodyChildren = document.body.childNodes;
for(var i=0;i<bodyChildren.length;i++){
  newDiv.append(bodyChildren[i]);
}
document.body.appendChild(newDiv);

Not sure about prototype, but in jQuery you can do this

$('body').wrap('<div id="wrap"></div>');

Answer 2

You would do something like:

var div = document.createElement("div");
div.id = "wrap";

// Move the body's children into this wrapper
while (document.body.firstChild)
{
    div.appendChild(document.body.firstChild);
}

// Append the wrapper to the body
document.body.appendChild(div);