Putting DIV wrapper around all code in body

A

andrej.kaurin

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?
 
A

Alexey Kulentsov

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
 
G

George Maicovschi

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? :-/
 
V

VK

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>
 
T

Thomas 'PointedEars' Lahn

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
 
R

RobG

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.
 
G

George Maicovschi

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.

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.
 
A

andrej.kaurin

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.
 
A

Alexey Kulentsov

George said:
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.
 
G

George Maicovschi

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.

Hey Andrej, just post here your conclusions about the speed of the two
methods, I'm quite curious about them results on your script, since I
am using innerHTML now for something similar because when using
appendChild on a high number of elements in Firefox the memory
requests of Firefox just went up a whole lot.

Regards,
George Maicovschi.
 
R

RobG

On Mar 31, 7:59 am, George Maicovschi <[email protected]>
wrote:
I don't agree.
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.

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.

I used the ZDNet home page and inserted two buttons at the top, for
innerHTML and one for DOM (I did a re-load between runs to make it
even). In Firefox, the DOM method took half the time, in Safari it
took about 80% of the time of innerHTML, so for me the DOM method is a
clear winner for that page. I didn't test IE but I'll guess that
innerHTML wins there.

Of course the faster method may be dependent on the page structure,
but generally I'd say the DOM method shouldn't be any slower for a
typical page and you get exactly the same document, which you can't
guarantee with innerHTML.

Here's my buttons:

<input type="button" value="Wrap in div - innerHTML" onclick="
var s = new Date();
var body = document.getElementsByTagName('body')[0];
body.innerHTML = '<div>'+body.innerHTML+'</div>';
alert( new Date() - s);
">
<input type="button" value="Wrap in div - DOM" onclick="
var s = new Date();
var body = document.getElementsByTagName('body')[0];
var div = document.createElement('div');
while(body.firstChild){
div.appendChild(body.firstChild);
}
body.appendChild(div);
alert( new Date() - s);
">
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top