Question

我正在尝试使用jQuery的before（）和after（）来围绕元素（我的'模板'div）包装div。当我尝试在所选元素之后插入一个结束时，它实际上被放置在目标之前。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Div Wrap</title>

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<script>
$('document').ready(function() {
    var beforestr = "<div id=\"wrap\"><div id=\"header\">Top</div><div id=\"page\">";
    var afterstr = "</div><div id=\"footer\">Bottom</div></div>";
    $('#template').before(beforestr);
    $('#template').after(afterstr);
});
</script>

</head>
<body>

<div id="template">
    <h1>Page Title</h1>
    <p>Pellentesque habitant morbi tristique senectus 
    et netus et malesuada fames ac turpis egestas. Mauris 
    placerat eleifend leo. Quisque sit amet est et sapien 
    ullamcorper pharetra. 
    <script>document.write('This script should still work and might contain variables. Please don\'t recommend concatenation.');</script> 
    Donec non enim in turpis pulvinar facilisis.</p>
</div>

</body>
</html>

结果是：

<div id="wrap">
    <div id="header">Top</div>
    <div id="page">
    </div>
</div>
<div id="template">
    <h1>Page Title</h1>
        <p>Pellentesque habitant morbi tristique senectus 
        et netus et malesuada fames ac turpis egestas. Mauris 
        placerat eleifend leo. Quisque sit amet est et sapien 
        ullamcorper pharetra. 
        This script should still work and might contain variables. Please don't recommend concatenation.
        Donec non enim in turpis pulvinar facilisis.</p>
</div>
<div id="footer">Bottom</div>

为什么我的结束换行和页面 div会在目标之前放置，当我尝试将它们放在（）之后？有没有另一种方法来实现这一点（请记住，我可能需要在模板div中调用脚本函数）？

我相信你知道，最好的做法不是我要去的地方。

Answer 1

您无法插入片段，因为它们需要是完整的DOM元素。相反，你应该在这里的某些地方使用.wrap();它看起来应该是这样的：

$(document).ready(function() {
    $('#template').wrap('<div id="wrap">')
                  .wrap('<div id="page">').parent()
                  .before('<div id="header">Top</div>')
                  .after('<div id="footer">Bottom</div>');
});

You can test it out here。这样做的结果是你的整体效果：

<div id="wrap">
  <div id="header">Top</div>
  <div id="page">
    <div id="template">
      <h1>Page Title</h1>
      <p id="aeaoofnhgocdbnbeljkmbjdmhbcokfdb-mousedown">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Donec non enim in turpis pulvinar facilisis.</p>
    </div>
  </div>
  <div id="footer">Bottom</div>
</div>

Answer 2

您无法插入一半HTML标记。您的代码会在两次调用之间留下无效的DOM 浏览器将修复每个调用的HTML字符串，并生成不需要的结果。

相反，请致电.wrap：

$('#template')
    .find('script').remove().end()
    .wrap('<div id="page"><div id="wrap"></div></div>')
    .parent()
    .before('<div id="header">Top</div>')
    .after('<div id="footer">Bottom</div>')

这也将正确保留内容中的<script>。

Demo

Answer 3

不要使用部分内容。使用before（）和after（）添加页眉和页脚，但使用wrap（）作为包装器。参考http://api.jquery.com/wrap/

尝试在（）/ after（）之前插入部分元素时出现jQuery错误？

3 个答案:

Demo