Question

我该如何改变：

<div class="container">
  <div class="span-19">
    <div id="content">
       <!-- variable amount of content -->
         <form class="move-me">
        <!-- form -->
         </form>
    </div>
  </div>
</div>

进入这个：

<form class="move-me">
  <div class="container">
    <div class="span-19">
      <div id="content">
        <!-- variable amount of content -->
        <!-- form data -->
      </div>
    </div>
  </div>
</form>

使用jQuery？注意，我特别想要只移动<form>开始和结束标记，而不是该表单的子元素。我最好想要一些jQuery.fn以便我可以这样做：

$('.move-me').changeNesting('.container');

提前致谢！

Answer 1

使用unwrap和wrap：

var toMove = $('.move-me');
toMove.children().unwrap();
$('.container').wrap(toMove);

更新：请注意，如果表单嵌套了原始文本，则上述代码将无效。您可以使用另一个标记来包装表单的子项以使其工作（也可以使用Yoshi在评论中指出的end）：

$('.container').wrap(
  $('.move-me').wrapInner('<div class="nostyle"/>').children().unwrap().end()
);

Answer 2

使用.wrap()和.detach()，如下所示：

$('.container').wrap( $('form.move-me').detach() );

Answer 3

$('.move-me').replaceWith(function() {
    return $('*', this);
});
$('.container').wrap('<form class="move-me" />');

demo http://jsfiddle.net/KX63Z/

Answer 4

var $form=$('form.move-me')
$form.replaceWith($form.html()));
$('.container').wrap('<form class="move-me">');

如何移动HTML DOM元素的开始和结束标记？

4 个答案: