SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    insert content just below <body>

    so, i want to insert a layer and it has to be on top of the html, just below the <body> tag. Any clue how to do that ?
    i know i could do something along the lines of:
    document.body.innerHTML = 'code'+document.body.innerHTML;
    But i'm worrying how that would affect client side cpu to manipulate potentially huge strings via javascript like this, so i'd rather play with the dom.
    The largest message boards on the web !
    unblog.fr, hosting 700000 french blogs

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should be fine using innerHTML = 'code' + innerHTML.

    If you want to use the Dom, you have to manually generate elements either by creating a main element and setting the innerHTML of that or manually creating every single one and then doing an insertBefore.

    I think Javascript and the browser are capable of handling the innerHTML method.


  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.body.insertBefore(newlayer,document.body.firstChild)

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The DOM method mrhoo has shown will be vastly more efficient than replacing the entire page content using innerHTML.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That may well be the case if the user is creating the content to be inserted, whereas if they are getting the content from else where, there is no way to do this without using innerHTML at some point.

    I agree DOM is the best way to go, but there is still need for use of innerHTML out there.


  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    In that case the best solution would be to use the DOM to insert an empty div tag at the start of the body and then use innerHTML to put the desired content into that. That way you don't have to reload the rest of the page content.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the answer guys, exactly what i was looking for.
    Is this:

    document.body.insertBefore(newlayer,document.body.firstChild)

    working across browsers ?
    cheers !
    The largest message boards on the web !
    unblog.fr, hosting 700000 french blogs


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •