代码之家 › 专栏 › 技术社区 › TuomasR

用jquery操纵<body>(或者找到更好的解决方案)

jquery javascript

TuomasR · 技术社区 · 15 年前

我正在尝试创建一个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> -标签。所以现在,当我调用wrap()时,似乎所有的东西都是先从$(document.body)中删除,然后附加到新的分区中。由于JS文件是从内部链接的,调用wrap()似乎会暂时删除它们,并且脚本似乎是由浏览器卸载的,所有的东西都会停止工作。Rking和我留下了一张空白页。不完全是我想的。

下一个想法是首先将JS标记复制到head元素以保存它们,因此我将它们包装在一个div中(是的,难看,我知道),并尝试将它们复制到:

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

这没有任何作用,而且似乎$(document.head)不能用于.html()和.append()等函数。

所以,现在我没主意了。有人有什么想法吗?

4 回复 | 直到 15 年前

Adam Kiss 15 年前

主意

如果离开事实,那 $(document.body) 不存在,将所有内容封装到DIV中,然后通过 attr 可能有问题(不要问我为什么会发生)。所以我玩了它,并创建了这个小片段(预览,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

编辑:

进一步简化和适当的标记生成

Quentin 15 年前

$(document.head)不能用于.html()和.append()等函数。

那是因为document.head是 undefined

使用 $("head")[0]

deostroll 15 年前

不清楚你想在头部添加什么。如果您只是想在末尾添加一个DIV,这里有一个解决方案:

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

K Prime 15 年前

我相信这会更好地为您服务:

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

裁判: wrapAll

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

9 月前

Alex · 在轻量级中同时解构和不解构变量

10 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

10 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

10 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

10 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

10 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

user3472810 · Angular@Output/EventEmitter返回undefined

10 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

10 月前