Wrapping a div around the document body contents

javascript html prototypejs
Skybly picture Skybly · Oct 16, 2009 · Viewed 9.3k times · Source

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?

Answer

Anthony Mills picture Anthony Mills · Oct 16, 2009

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);

Related questions

How to autosize a textarea using Prototype?

I'm currently working on an internal sales application for the company I work for, and I've got a form that allows the user to change the delivery address. Now I think it would look much nicer, if the textarea I'm …

Read More
Can I insert elements to the beginning of an element using .appendChild()?

If the user selects an option in a dropdown box, there must be added a label and a textbox. Using appendChild, these elements get added to the end of the container. var newFreeformLabel = document.createElement('label'); newFreeformLabel.innerHTML = 'Omschrijving:'; …

Read More
How to return Element ID instead of [object HTMLDivElement] (Prototype.js)

I know this is simple, but I can't wrap my head around it. Currently the following code returns "[object HTMLDivElement],[object HTMLDivElement]" I'd like it to return "div1,div2". Any thoughts? Thanks guys. <HTML> <HEAD> <…

Read More