Hi guy,
I got a markup looking like this :
<body>
<...
a lot of tags from the web site
...>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.1.1/jquery.tools.min.js"></script>
<script type="text/javascript" src="my_script.js"></script>
<body>
I want it to end up that way :
<body>
<div id="body-content">
<...
a lot of tags from the web site
...>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.1.1/jquery.tools.min.js"></script>
<script type="text/javascript" src="my_script.js"></script>
</div>
<div id="isolated-component">
</div>
<body>
So I can populate #isolated-component and easily discard them from a jQuery selection.
I tried that :
jQuery("body").children().wrapAll("<div id='body-content'></div>")
.after("<div id='isolated-component'></div>");
But ended up with :
<html>
<head>
<body>
<div id="body-content">
<div id="body-content">
<... page content ...>
</div>
<div id="isolated-component"/>
<div id="isolated-component"/>
</div>
<script src="my_script.js" type="text/javascript">
</script>
</body>
<div id="_firebugConsole" style="display: none;" FirebugVersion="1.4.3" methodName="log"/>
</html>