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

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" />');​

演示http://jsfiddle.net/KX63Z/

Answer 4

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