Putting DIV wrapper around all code in body

Discussion in 'Javascript' started by andrej.kaurin@gmail.com, Mar 30, 2008.

  1. Guest

    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?
     
    , Mar 30, 2008
    #1
    1. Advertising

  2. 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
     
    Alexey Kulentsov, Mar 30, 2008
    #2
    1. Advertising

  3. On Mar 30, 10:58 pm, Alexey Kulentsov <> wrote:
    > 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? :-/
     
    George Maicovschi, Mar 30, 2008
    #3
  4. VK Guest

    On Mar 30, 10:02 pm, 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>
     
    VK, Mar 30, 2008
    #4
  5. 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
     
    Thomas 'PointedEars' Lahn, Mar 31, 2008
    #5
  6. 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.
    > [...]
     
    Thomas 'PointedEars' Lahn, Mar 31, 2008
    #6
  7. RobG Guest

    On Mar 31, 7:59 am, George Maicovschi <>
    wrote:
    > On Mar 30, 10:58 pm, Alexey Kulentsov <> wrote:
    > > 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
     
    RobG, Mar 31, 2008
    #7
  8. On Mar 31, 4:22 am, RobG <> wrote:
    > On Mar 31, 7:59 am, George Maicovschi <>
    > wrote:
    >
    >
    >
    > > On Mar 30, 10:58 pm, Alexey Kulentsov <> wrote:
    > > > 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.
     
    George Maicovschi, Mar 31, 2008
    #8
  9. Guest

    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.
     
    , Mar 31, 2008
    #9
  10. 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.
     
    Alexey Kulentsov, Mar 31, 2008
    #10
  11. On Mar 31, 10:16 am, wrote:
    > 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.
     
    George Maicovschi, Mar 31, 2008
    #11
  12. RobG Guest

    On Mar 31, 2:47 pm, George Maicovschi <>
    wrote:
    > On Mar 31, 4:22 am, RobG <> wrote:
    >
    >
    >
    > > On Mar 31, 7:59 am, George Maicovschi <>
    > > wrote:

    >
    > > > On Mar 30, 10:58 pm, Alexey Kulentsov <> wrote:
    > > > > 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
     
    RobG, Mar 31, 2008
    #12
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Saurabh
    Replies:
    6
    Views:
    4,544
    Chris Smith
    May 30, 2004
  2. Mike Vieths

    execv putting quotes around arguments

    Mike Vieths, Feb 6, 2004, in forum: Python
    Replies:
    1
    Views:
    540
    Donn Cave
    Feb 6, 2004
  3. putting quotes around macro

    , Jul 13, 2007, in forum: C Programming
    Replies:
    2
    Views:
    316
    Thad Smith
    Jul 13, 2007
  4. Sherm Pendley
    Replies:
    4
    Views:
    88
    John Bokma
    Jun 18, 2005
  5. Replies:
    5
    Views:
    213
    A. Sinan Unur
    Sep 8, 2005
Loading...

Share This Page