如何移动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);?

更新:请注意,如果表单具有嵌套的原始文本,则上述代码将不起作用.您可以使用另一个标记来包装表单的子项以使其工作(也可以使用endYoshi在评论中指出):

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