Re: Putting DIV wrapper around all code in body

On Mar 31, 2:47 pm, George Maicovschi <georgemaicovs...@xxxxxxxxx>
wrote:
On Mar 31, 4:22 am, RobG <rg...@xxxxxxxxxxxx> wrote:



On Mar 31, 7:59 am, George Maicovschi <georgemaicovs...@xxxxxxxxx>
wrote:

On Mar 30, 10:58 pm, Alexey Kulentsov <a...@xxxxxxxx> wrote:
andrej.kau...@xxxxxxxxx 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.

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


--
Rob
.

Quantcast