Putting DIV wrapper around all code in body

03-30-2008

I need to put all body content into wrapper when page is loaded. Via
javascript of course.

Initial DOM

<body>
<div>
<p>Some text</p>
<p>More text</p>
</div>
</body>

Modified DOM with javascript

<body>
<div id="myWrapper">
<div>
<p>Some text</p>
<p>More text</p>
</div>
<div>
</body>

Any idea?

03-30-2008

wrote:

> Initial DOM
>
> <body>
> <div>
> <p>Some text</p>
....
> Modified DOM with javascript
>
>
> <body>
> <div id="myWrapper">
> <div>
....
> Any idea?

HTML

<head>
<script>

function addDiv()
{
// get body tag
var body=document.getElementsByTagName('body').item(0) ;

// create div element
var div=document.createElement('div');

// demonstrate it
// set id here if you want
div.style.border='1px solid red';
div.style.padding='0 1ex';

// while here is child in body..
var e;
while(e=body.firstChild)
// move it to div
div.appendChild(e);

// append div to body
body.appendChild(div);
}

</script>
</head>
<body onload="addDiv()">
<div>
<p>Some text</p>
<p>More text</p>
</div>
</body>

/HTML

03-30-2008

On Mar 30, 10:58 pm, Alexey Kulentsov <a...@inbox.ru> wrote:
> andrej.kau...@gmail.com wrote:
> > Initial DOM
>
> > <body>
> > <div>
> > <p>Some text</p>
> ...
> > Modified DOM with javascript
>
> > <body>
> > <div id="myWrapper">
> > <div>
> ...
> > Any idea?
>
> HTML
>
> <head>
> <script>
>
> function addDiv()
> {
> // get body tag
> var body=document.getElementsByTagName('body').item(0) ;
>
> // create div element
> var div=document.createElement('div');
>
> // demonstrate it
> // set id here if you want
> div.style.border='1px solid red';
> div.style.padding='0 1ex';
>
> // while here is child in body..
> var e;
> while(e=body.firstChild)
> // move it to div
> div.appendChild(e);
>
> // append div to body
> body.appendChild(div);
>
> }
>
> </script>
> </head>
> <body onload="addDiv()">
> <div>
> <p>Some text</p>
> <p>More text</p>
> </div>
> </body>
>
> /HTML

From personal experience I know that moving a LOT of elements (or
creating a LOT of new ones) can cause the browser to move slowly and
make a user experience not so nice, so this method shouldn't be used
on very large pages.

Couldn't we try an approach using the innerHTML? :-/

03-30-2008

On Mar 30, 10:02 pm, andrej.kau...@gmail.com wrote:
> I need to put all body content into wrapper when page is loaded. Via
> javascript of course.
>
> Initial DOM
>
> <body>
> <div>
> <p>Some text</p>
> <p>More text</p>
> </div>
> </body>
>
> Modified DOM with javascript
>
> <body>
> <div id="myWrapper">
> <div>
> <p>Some text</p>
> <p>More text</p>
> </div>
> <div>
> </body>
>
> Any idea?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-1">
<title>Demo</title>
<script type="text/javascript">
function init() {
var elm = document.createElement('DIV');
elm.innerHTML = document.body.innerHTML;
document.body.innerHTML = '';
document.body.appendChild(elm);
}
window.onload = init;
</script>
</head>
<body>
<p>Page content</p>
</body>
</html>

03-31-2008

wrote:
> I need to put all body content into wrapper when page is loaded. Via
> javascript of course.
>
> Initial DOM
>
> <body>
> <div>
> <p>Some text</p>
> <p>More text</p>
> </div>
> </body>

Actually, that is not a DOM (Document Object Mode) which is an API
(Application Programming Interface). It is a document fragment.

> Modified DOM with javascript
>
>
> <body>
> <div id="myWrapper">
> <div>
> <p>Some text</p>
> <p>More text</p>
> </div>
> <div>
> </body>
>
> Any idea?

While some people would advocate innerHTML parsing and even worse methods,
it is important to keep in mind that objects have identity in the language
as they have in the document tree. Therefore, Node::appendChild() is
explicitly specified to move a node if it is appended in a different location:

var oldDiv = document.getElementsByTagName("div")[0];
var divWrapper = document.createElement("div");
divWrapper.id = "myWrapper";
divWrapper.appendChild(oldDiv);
document.body.appendChild(divWrapper);

You should add the usual feature tests and associated fallbacks, of course.

HTH

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

03-31-2008

Thomas 'PointedEars' Lahn wrote:
> wrote:
>> Initial DOM
>>
>> <body>
>> <div>
>> <p>Some text</p>
>> <p>More text</p>
>> </div>
>> </body>
>
> Actually, that is not a DOM (Document Object Mode) which is an API

You should add an "l" for *Model*, of course.

> (Application Programming Interface). It is a document fragment.
> [...]

03-31-2008

On Mar 31, 7:59 am, George Maicovschi <georgemaicovs...@gmail.com>
wrote:
> On Mar 30, 10:58 pm, Alexey Kulentsov <a...@inbox.ru> wrote:
> > andrej.kau...@gmail.com wrote:
> > > Initial DOM
>
> > > <body>
> > > <div>
> > > <p>Some text</p>
> > ...
> > > Modified DOM with javascript
>
> > > <body>
> > > <div id="myWrapper">
> > > <div>
> > ...
> > > Any idea?
>
> > HTML
>
> > <head>
> > <script>
>
> > function addDiv()
> > {
> > // get body tag
> > var body=document.getElementsByTagName('body').item(0) ;
>
> > // create div element
> > var div=document.createElement('div');
>
> > // demonstrate it
> > // set id here if you want
> > div.style.border='1px solid red';
> > div.style.padding='0 1ex';
>
> > // while here is child in body..
> > var e;
> > while(e=body.firstChild)
> > // move it to div
> > div.appendChild(e);
>
> > // append div to body
> > body.appendChild(div);
>
> > }
>
> > </script>
> > </head>
> > <body onload="addDiv()">
> > <div>
> > <p>Some text</p>
> > <p>More text</p>
> > </div>
> > </body>
>
> > /HTML
>
> From personal experience I know that moving a LOT of elements (or
> creating a LOT of new ones) can cause the browser to move slowly and
> make a user experience not so nice, so this method shouldn't be used
> on very large pages.

I don't agree.

> Couldn't we try an approach using the innerHTML? :-/

Yes, but the value returned by innerHTML is not necessarily the same
as the source code used to create the document fragment it represents,
particularly in regard to attribute values.

In this case, a solution based on innerHTML requires that all the
elements it represents are destroyed and re-created. I would expect
moving elements to be much faster, particularly if you keep the number
of direct decendants of the body element reasonably small. Even very
large and complex pages often have only 20 or so such elements, even
though the page itself might contain thousands.

Why not test it, here's a trivial innerHTML solution:

function wrapBodyContentInDiv() {
var body = document.getElementsByTagName('body')[0];
body.innerHTML = '<div>' + body.innerHTML + '</div>';
}

See if that is any faster than the solution offered by Alexey for a
big document.

--
Rob

03-31-2008

On Mar 31, 4:22 am, RobG <rg...@iinet.net.au> wrote:
> On Mar 31, 7:59 am, George Maicovschi <georgemaicovs...@gmail.com>
> wrote:
>
>
>
> > On Mar 30, 10:58 pm, Alexey Kulentsov <a...@inbox.ru> wrote:
> > > andrej.kau...@gmail.com wrote:
> > > > Initial DOM
>
> > > > <body>
> > > > <div>
> > > > <p>Some text</p>
> > > ...
> > > > Modified DOM with javascript
>
> > > > <body>
> > > > <div id="myWrapper">
> > > > <div>
> > > ...
> > > > Any idea?
>
> > > HTML
>
> > > <head>
> > > <script>
>
> > > function addDiv()
> > > {
> > > // get body tag
> > > var body=document.getElementsByTagName('body').item(0) ;
>
> > > // create div element
> > > var div=document.createElement('div');
>
> > > // demonstrate it
> > > // set id here if you want
> > > div.style.border='1px solid red';
> > > div.style.padding='0 1ex';
>
> > > // while here is child in body..
> > > var e;
> > > while(e=body.firstChild)
> > > // move it to div
> > > div.appendChild(e);
>
> > > // append div to body
> > > body.appendChild(div);
>
> > > }
>
> > > </script>
> > > </head>
> > > <body onload="addDiv()">
> > > <div>
> > > <p>Some text</p>
> > > <p>More text</p>
> > > </div>
> > > </body>
>
> > > /HTML
>
> > From personal experience I know that moving a LOT of elements (or
> > creating a LOT of new ones) can cause the browser to move slowly and
> > make a user experience not so nice, so this method shouldn't be used
> > on very large pages.
>
> I don't agree.
>
> > Couldn't we try an approach using the innerHTML? :-/
>
> Yes, but the value returned by innerHTML is not necessarily the same
> as the source code used to create the document fragment it represents,
> particularly in regard to attribute values.
>
> In this case, a solution based on innerHTML requires that all the
> elements it represents are destroyed and re-created. I would expect
> moving elements to be much faster, particularly if you keep the number
> of direct decendants of the body element reasonably small. Even very
> large and complex pages often have only 20 or so such elements, even
> though the page itself might contain thousands.
>
> Why not test it, here's a trivial innerHTML solution:
>
> function wrapBodyContentInDiv() {
> var body = document.getElementsByTagName('body')[0];
> body.innerHTML = '<div>' + body.innerHTML + '</div>';
>
> }
>
> See if that is any faster than the solution offered by Alexey for a
> big document.
>
> --
> Rob

Yeah, it is.

And I'm saying it because I've done it already.
appendChild9) on about 120 DIV's strarts showing age while innnerHTML
is movign way better.

But that's only my opinion whatsoever.

03-31-2008

Guys, thanks a lot.
It really solved my problem. I was trying approach with "appendChild"
but totaly forgot that when first child is moved into div than next
child is now firstChild

. I will test this solution with innerHTML
also to compare speeds.
Thanks a lot.

03-31-2008

George Maicovschi wrote:

> From personal experience I know that moving a LOT of elements (or
> creating a LOT of new ones) can cause the browser to move slowly and
> make a user experience not so nice, so this method shouldn't be used
> on very large pages.
>
> Couldn't we try an approach using the innerHTML? :-/

In any case browser need to remove all elements from body and insert
them to DIV, but in the case of innerHTML here is additional conversion
from DOM to HTML (text=body.innerHTML) and then back from HTML to DOM
(div.innerHTML=text) so I don't think it's more fast then direct moving.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
<div ... /> and <div ...></div>	K Viltersten	ASP .Net	4	03-31-2009 07:33 PM
all the text (including tags) between <body> .. </body>	tarakparekh@yahoo.com	Perl Misc	5	09-07-2005 11:40 PM
Read all of this to understand how it works. then check around on otherRead all of this to understand how it works. then check around on other	thelisa martin	Computer Support	2	08-18-2005 06:40 AM
Q: Div A inside Div B is larger than Div B	Dwayne Madsen	Javascript	1	06-01-2005 03:02 PM
Difference between putting code in constructor and putting code in static{}	Saurabh	Java	6	05-30-2004 02:44 PM