javascript - 如何移动 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()
);​​​​

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