Question

如何围绕现有<div>创建<div>。

我的代码如下：

<div id="test">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
</div>
<div id="test2">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
</div>

<script>
  $("#test").before('<div class="test3">');
  $("#test2").after('</div>');
</script>

但似乎无法在没有结束标记的情况下插入<div>。那么如何实现呢？

Answer 1

使用.wrapAll() ^doc方法

$('#test, #test2').wrapAll('<div class="test3">');

Answer 2

您可以使用.wrap() API调用，它将使用新元素包装现有HTML。

Answer 3

jQuery包装本机DOM API，它使用完整的HTML元素。

您无法插入一半标签。

相反，您应该通过创建一个分离的$('<div />')来构建一个完整的节点，向其添加多个元素，然后将整个树添加到DOM中。

Answer 4

好的，请使用：

<script>
       var inner=$("#test");
       var outer=$('<div class="outer"></div>');
       outer.html(inner.html());
       inner=outer;
</script>

Answer 5

这是你应该做的：

<script type="text/javascript">
$(function() {
    $('<div class="test3"></div>')
        .insertBefore($('#test'))
        .append($('#test'))
        .append($("#test2"));
}
</script>

如何在jQuery中用另一个元素包装现有元素？

5 个答案: