This is hard to explain but I will do my best.
In order to provide the correct footer style for my site, I need to encase my content in a div whose id is body-bot. This div is of course encased in the body div. Now inside that body-bot, I have many other divs.
The problem is that after a bit of JQuery , some divs are getting pushed out of the body-bot when I run it on the browser. ( Checked by using Firebug and page code-source ).
Now my question isn’t really about how to fix it, but more on how and why divs can be pushed out of other divs when loaded.
So, what can cause this issue ? Of course if you have some ideas on how to solve the problem, be my guest. I can’t really show the exact code because it’s enormous…
EDIT : Here is an example of what I mean :
<body>
<div class="body-bot">
<div class="content">
</div>
<div class="banner">
</div>
<div class="footer">
</div>
</div>
</body>
Becomes :
<body>
<div class="body-bot">
<div class="content">
</div>
</div>
<div class="banner">
</div>
<div class="footer">
</div>
</body>
The only way I can think of to insert a closing tag would be to change the innerhtml property on <body> – which doesn’t seem likely. It’s more likely that your JS is changing the parent of the inner divs, than that it’s somehow inserting a closing tag.
I believe the “parent” property on an element is read-only, so something couldn’t be changing the parent that way.
That leaves an appendChild, insertBefore, or appendChild on <body> that has the wrong target – or a call with the right target, but being called on <body> when it should be called on body-bot.