CODEWITHSUNDEEP
javascriptjquery
TuomasR
TuomasR

Reputation: 2316

Manipulating <body> with jQuery? (Or figuring a better solution)

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?

Upvotes: 2

Views: 471

Answers (4)

Adam Kiss
Adam Kiss

Reputation: 11859

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

Upvotes: 0

K Prime
K Prime

Reputation: 5849

I believe this should serve you better:

$('body')
    .children ().wrapAll ($('<div/>').attr('id','contentWrapper'))
    .end ()
    .append ($('<div/>').attr('id','footerWrapper'))
;

Ref: wrapAll

Upvotes: 0

deostroll
deostroll

Reputation: 11975

not clear on what your are trying to add to the head part. if you are simply trying to add a div to the end here is a solution:

$(document).ready(function(){
                $(document.body).append($('<div></div>').attr('id','mydiv').html('This is footer'));
            });

Upvotes: 1

Quentin
Quentin

Reputation: 943510

$(document.head) isn't usable with functions such as .html() and .append().

That would be because document.head is undefined

Use $("head")[0]

Upvotes: 1

Related Questions