Home/ Questions/Q 637387
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T20:37:06+00:00

I’m trying to create a JS-script to make modifications to add a footer to

  • 0

I’m trying to create a JS-script to make modifications to add a footer to HTML -documents on the fly. The idea is to append a div-element at the end of the document to contain the footer, and to provide a floating fixed footer, I also need to have all of the other content wrapped in a div, basically I need something like this:

<html>
 <head>
  <title>Foobar</title>
 </head>
 <body>
  <div id="contentWrapper">
    <!-- Content is here -->
  </div>
  <div id="footerWrapper">
    <!-- Footer goes here -->
  </div>
 </body>
</html>

The problem is, that the HTML is generated from a system where the end user’s have had a little too much control over the structure (it’s a blogging platform), and there’s no guarantee of a certain sturcture hence I need to wrap the content in a div to ensure the footer works ok.

What I tried, and realized that doesn’t work is:

$(document.body).wrap($('<div/>').attr('id','footerWrapper'));

The problem with this is that due to the fact that the HTML structure is generated by the user, I have been forced to inject links to the JS-file inside the <body>-tag. So now when I call wrap(), it seems that everything is first removed from $(document.body) and then appended in the new div. Since the JS-files are linked from inside , calling wrap() seems to remove them momentarily, and it seems that the scripts are unloaded by the browser and everything stops working and I’m left with a blank page. Not exactly what I had in mind.

Next idea was to first copy the JS-tags to the head-element to preserve them, so I wrapped them in a div (yeah, ugly, I know), and tried to copy them to the :

$(document.head).append($('#copyToHead').html());

That didn’t do anything, and seems that $(document.head) isn’t usable with functions such as .html() and .append().

So, now I’m out of ideas. Anyone have any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    idea

    If leave fact, that $(document.body) doesn’t exist, wrapping everything into div and then setting id through attr might be problematic (don’t ask me why—it just happens). So I played with it and created this little snippet (with preview, 100% working).

    Since you can’t play with html, but can “append” script I did whole document manipulation through inline script.

    code

      <script type="text/javascript">
  $(document).ready(function(){
    $("body")
      .wrapInner('<div id="wrapper"/>')
      .append('<div id="footer">footer text</div>');
  });
  </script>

    preview

    http://jsbin.com/ezoqo4/3

    edits:

    • further simplification and proper markup generation
    • 0