用jQuery操作？ （或者找出更好的解决方案）

时间：2010-03-02 08:58:59

标签： javascript jquery

我正在尝试创建一个JS脚本来进行修改，以便动态地向HTML文档添加页脚。我的想法是在文档的末尾添加一个div元素来包含页脚，并提供一个浮动的固定页脚，我还需要将所有其他内容包装在div中，基本上我需要这样的东西： 

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

问题是，HTML是从最终用户对结构有一点控制权的系统（它是一个博客平台）生成的，并且不能保证某种结构因此我需要包装div中的内容以确保页脚正常工作。

我尝试过，并意识到不起作用是：

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

这个问题是由于HTML结构是由用户生成的，我被迫在<body> - 标签内注入了JS文件的链接。所以现在当我调用wrap（）时，似乎首先从$（document.body）中删除所有内容，然后将其附加到新div中。由于JS文件是从内部链接的，因此调用wrap（）似乎会暂时删除它们，并且似乎浏览器卸载了脚本，一切都停止工作，我留下了空白页面。不完全是我想到的。

接下来的想法是首先将JS标签复制到head-element以保存它们，所以我将它们包装在div中（是的，丑陋的，我知道），并试图将它们复制到：

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

那没有做任何事情，似乎$（document.head）不能用于.html（）和.append（）等函数。

所以，现在我没有想法了。有人有什么想法吗？

4 个答案:

答案 0 :(得分：1)

  

$（document.head）不能用于.html（）和.append（）等函数。

那是因为document.head是undefined

使用$("head")[0]

答案 1 :(得分：1)

不清楚你想要添加到头部的内容。如果你只是想在这里添加一个div，这是一个解决方案：

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

答案 2 :(得分：0)

主意

如果留下事实，$(document.body)不存在，将所有内容包装到div中然后通过attr设置id可能会有问题（不要问我为什么 - 它只是发生）。所以我玩它并创建了这个小片段（预览，100％工作）。

由于你不能使用html，但可以“追加”script我通过内联脚本进行了整个文档操作。

码

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

预览

http://jsbin.com/ezoqo4/3

编辑：

  • 进一步简化和正确标记生成

答案 3 :(得分：0)

我相信这应该会让你更好：

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

参考：wrapAll

相关问题
最新问题